인라인 블록 목록 항목의 내용을 세로로 정렬하십시오.

정렬되지 않은 목록을 가로로 표시하려고합니다. 각 목록 항목에는 목록 항목에 세로로 정렬하여 표시하려는 이미지가있는 앵커 태그가 있습니다. 여기 내인라인 블록 목록 항목의 내용을 세로로 정렬하십시오.

HTML는 다음과 같습니다는

<ul> 
    <li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
    <li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li> 
</ul>

CSS :

ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    height: 93px; 
} 

ul li 
{ 
    display: inline-block; 
    width: 110px; 
    height: 93px; 
    text-align: center; 
    vertical-align: middle; 
}

은 내가 잘못 여기서 뭐하는 거지?

출처

2011-09-15 Steven

http://jsfiddle.net/zgxHB/1/

이 display: table-cell; 대신

출처

2011-09-16 00:05:01 Joe

안녕하세요. @Kyle Sevenoaks가 제안한 접근 방식에 대한 접근 방식이 궁금합니다 ('float : left'). 어떤 것이 더 나은지에 대한 권장 사항은 무엇입니까? 두 가지 모두 동일한 시각 효과를 얻는 것처럼 보이지만 궁금합니다. TIA. –

@SalvatoreIovene, table-cell은 수직 정렬과 수평 정렬을 허용합니다. http://jsfiddle.net/zgxHB/20/, float 솔루션보기. – Joe

고마워요 @JoeTuskan. 따라서 수직 정렬에 신경 쓰지 않는다면 두 가지 방법이 서로 바뀔 수 있습니까? –

왼쪽으로 떠 있습니다. 이

출처

2011-09-15 23:59:27 Kyle

display: inline-block;의를 사용해보십시오 자신의 블록 상태 수평 라인을 표시하고 유지합니다 디스플레이 : 인라인 블록; 요소가 인라인 레벨 인 것처럼 취급합니다. 즉, 페이지가 렌더링 될 때 마크 업의 공백이 표시됩니다.

TRY :

<ul><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
</li></ul>

OR :

<ul><!-- 
    --><li> 
     <a href="#"> 
      <img src="1.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="2.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
    --><li> 
     <a href="#"> 
      <img src="3.jpg" alt="" height="50" width="50" /> 
     </a> 
    </li><!-- 
--></ul>

출처

2013-09-10 17:52:31 Kyle

인라인 블록 목록 항목의 내용을 세로로 정렬하십시오.

답변

관련 문제