CSS로 valign = "bottom"

현재 정렬되지 않은 목록에 이미지 목록이 있습니다. 때문에 내 이미지에서 서로 다른 높이에CSS로 valign = "bottom"

는

float:left; margin:2px 4px; padding:0

, 나는 그들이 바닥에 정렬 한하고자 다음과 같이 리튬 태그

<ul id="sponsors"><li><img src=.../></li> 
<li><img src=.../></li><li><img src=.../></li> 
</ul>

CSS입니다. 나는 이것을 테이블과 valign = "bottom"으로 쉽게 얻을 수 있다는 것을 알고 있습니다. 나는 세로 정렬로 놀았습니다 : 하단 img 태그와 li 태그에 시도했지만 이미지가 맨 아래에 정렬되지 않는 것 같습니다.

어떻게해야합니까?

이

li { 
    display: inline-block; 
    margin: 2px 4px; 
    padding: 0; 
}

이 li img 가정 baseline의 기본 vertical-align 값을 가지고 :

출처

2011-03-16 Kyle

jsfiddle.net에 이것을 넣을 수 있습니까? – adarshr

확실히! http://jsfiddle.net/LhM9X/ – Kyle

당신은 li 요소를 사이드 측에 의해 대신을 배치 inline-block를 사용할 수 있습니다. 제공 : http://jsfiddle.net/LHutF/1/

출처

2011-03-16 15:24:08

多謝! 그것은 효과가있다! – Kyle

제공된 <li>의 스타일에서는 float 속성이 사용됩니다. 요소를 플로팅하면 페이지의 요소 레이아웃의 일반적인 흐름에서 제거됩니다. 즉, 귀하의 예에서 각 <li>은 실제로 그 이미지가 포함 된 정렬되지 않은 목록의 테두리 바깥에서 떠 다니고 있으며, 각각 정확히 포함 된 이미지의 높이와 너비입니다. 이 경우 vertical-align 속성은 아무 것도 정렬 할 수 없습니다.

이 문제를 보여주는 간단한 예제가 나와 있습니다. 높이가 다른 이미지를 시뮬레이션하려면 각 <img>에 다른 height 값 (CSS)을 지정해야합니다. 렌더링 도중 실제로 무엇이 일어나는지 확인하기 위해 각 <li> 및 <ul> 태그 주위에 테두리를 추가했습니다.

<html> 
<head> 
<style> 
    li { float:left; margin:2px 4px; padding:0; border: solid 1px black; } 
    ul { border: solid 1px black; } 
</style> 
</head> 
<body> 
    <ul id="sponsors"> 
     <li><img style="height: 150px; width: 50px" src=.../></li> 
     <li><img style="height: 50px; width: 50px" src=.../></li> 
     <li><img style="height: 75px; width: 50px" src=.../></li> 
    </ul> 
</body> 
</html>

호프가이 점을 분명히 밝힙니다.

display: inline을 사용하면 <li>에서 부동 문자 대신 사용해 볼 수 있습니다.

<html> 
<head> 
<style> 
    ul { list-style: none; border: solid 1px black; } 
    li { display: inline; border: solid 1px black; } 
    img { vertical-align: bottom; } 
</style> 
</head> 
<body> 
    <ul id="sponsors"> 
     <li><img style="height: 150px; width: 50px" src=.../></li> 
     <li><img style="height: 50px; width: 50px" src=.../></li> 
     <li><img style="height: 75px; width: 50px" src=.../></li> 
    </ul> 
</body> 
</html>

출처

2011-03-16 15:35:17 Schmuli

CSS로 valign = "bottom"

답변

관련 문제