단락을 각각의 이미지에 정렬 할 수 없습니다. (행 3 단락) 내 상황을 설명

이미지 :
enter image description here 단락을 각각의 이미지에 정렬 할 수 없습니다. (행 3 단락) 내 상황을 설명

은 현재 생겼 방법 :
enter image description here

** 내가 가지고있는 이미지에 텍스트를 정렬에 문제가, Express Yourself 페이지에서

나는 래퍼의 전체 너비를 기준으로 같은 너비의 단락을 설정해 보았습니다. 그림을 성공적으로 떠 다닐 수있었습니다. 이미지가 나란히 있습니다. 그러나, 그것의 각각의 이미지와 중심적으로 정렬되어야하는 텍스트는 변하지 않습니다.

텍스트를 실험 할 때 모든 텍스트가 왼쪽에 있거나 중앙 집중식으로 표시됩니다. 모두 아래에, 서로 아래에. 어떻게 나란히 할 각각의 단락을 이동할 수 있어요 서로, 중앙에서 이미지 정렬? **

<Style> 

#wrapper { 
width:970px; 
margin-left:auto; 
margin-right:auto; /* Most crucial thing to align the whole page plus margin-left */ 
} 

#section1 img, #section2 img, #section3 img, #section4 img { 
max-width:100%; 
float:left; 
display:block; 
padding-bottom:30px; 
} 

#section1, #section2, #section3, #section4 { 
font:Arial, Helvetica, sans-serif; 
font-size: 
text-align:center; 
} 

p.title { 
width:323px; 

} 



hgroup { 
font:Arial, Helvetica, sans-serif; 
font-size:1em; 
font-weight:bold; 
padding-top:24px; /*To give space inbetween image and Text*/ 
width:323px; 
} 

</style> 


<body> 

<div id="wrapper"> 

<section id="section1"> 
<img src="img/showcase_project1.jpg"> 
    <img src="img/showcase_project2.jpg"> 
    <img src="img/showcase_project3.jpg"> 

    <hgroup>PAVÉ</hgroup> 
    <p class="title">Illustration Design<br>Avina Tan</p> 

    <hgroup>REBRANDING HAW PAR VILLA</hgroup> 
    <p>Branding Design<br>Tan Chin Hwee</p> 

    <hgroup>DREAMS</hgroup> 
    <p class="title">Photography<br>Jessie Lam</p> 
</section> 

<section id="section2"> 
<img src="img/showcase_project4.jpg"> 
    <img src="img/showcase_project5.jpg"> 
    <img src="img/showcase_project6.jpg"> 

    <hgroup>PAPER NEVER FORGETS</hgroup> 
    <p class="title">Graphic Design<br>Janelle Qua</p> 

    <hgroup>‘O THAT TWISTED STORY</hgroup> 
    <p class="title">Illustration Design<br>Jennifer Soon</p> 

    <hgroup>HOMEBREW</hgroup> 
    <p class="title">Branding Design<br>Fiona Lim</p> 
</section> 

<section id="section3"> 
<img src="img/showcase_project7.jpg"> 
    <img src="img/showcase_project8.jpg"> 
    <img src="img/showcase_project9.jpg"> 

    <hgroup>FIVE (MUSIC IN PRINT)</hgroup> 
    <p class="title">Photography<br>Jonathan Liu</p> 

    <hgroup>PRECIOUS</hgroup> 
    <p class="title">Graphic and Editorial Design <br>Tzeng Li Syuan</p> 

    <hgroup>26 HOURS</hgroup> 
    <p class="title">Digital Design<br>Evelyn Chew & Rachall Tay</p> 
</section> 

<section id="section4"> 
<img src="img/showcase_project10.jpg"> 
    <img src="img/showcase_project11.jpg"> 

    <hgroup>JOY IN A CUP</hgroup> 
    <p class="title">Digital Design<br>Chua Pei En & Lim Si Hui</p> 

    <hgroup>AZURE AIRLINE APP</hgroup> 
    <p class="title">Digital Design<br>Tulasi & Lock Phutthaphon</p> 
</section> 

</div> 

</body>

출처

2014-10-25 Mica

오, 내가 여기 새로 왔으므로 이미지를 게시 할 수 없습니다. 여기 내 상황을 묘사하는 그림에 대한 링크가 있습니다. http://i667.photobucket.com/albums/vv40/Casandrachia/MyProblem_zps2a01da7b.jpg – Mica

가 몇 가지 문제가 여기에 있습니다,하지만 당신의 문제를 해결하기 위해, 나는 그룹화 권 해드립니다 각 이미지는 <hgroup> 및 <p class="title">과 같이 <div> 또는 그 외의 것으로 래핑 한 다음 래퍼를 플로팅하면됩니다. 이런 식으로 : http://jsfiddle.net/Lp32mtkm/.

<p> 태그와 <hgroup> 태그가 기본적으로 블록 요소 (이것은 CSS 속성 display으로 명시 적으로 설정할 수 있음)이기 때문에 버전이 작동하지 않는 경우 자동으로 새 줄을 시작하기 때문에 버전이 작동하지 않는 이유가 있습니다. 이전 줄에 그들을위한 공간. <img> 태그는 실제로 기본적으로 인라인 요소이며 서로 나란히 배치됩니다.

EDIT : 텍스트 가운데 맞추기에 관한 부분을 놓쳤습니다. 포장 요소에 text-align:center을 넣기 만하면됩니다 (예 : http://jsfiddle.net/Lp32mtkm/1/).

출처

2014-10-25 01:18:28 peterjb

감사합니다. 덕분에 텍스트가 각각의 이미지에 정렬되도록하는 데 도움이되었습니다. 그러나 텍스트는 이미지 가운데에 위치하지 않습니다. 이를 변경하기 위해 텍스트 정렬 : center; 텍스트는 좌우 이미지에 집중됩니다. 그러나 중앙 이미지의 텍스트는 중앙 집중화되지 않습니다. 그것을 고치는 어떤 방법? :/ 아, 내 바닥 글이 맨 아래에 있지 않습니다. 페이지의 일부를 차단합니다. – Mica

예 처음에는 가운데 맞춤 텍스트 부분을 놓쳤습니다. 죄송합니다. 나는'text-align : center'라는 다른 jsfiddle로 답을 편집에 추가했습니다. 그게 당신이 원하는 것처럼 보이나요? 'text-align : center'는 어디에 두는가? – peterjb

RE : footer, 코드를 보지 않고 그냥 추측하고 있지만 바닥 글에 'clear : both'를 추가하면 작동 할 수 있습니다. – peterjb

단락을 각각의 이미지에 정렬 할 수 없습니다. (행 3 단락) 내 상황을 설명

답변

관련 문제