인라인 / 인라인 블록 요소의 CSS 수직 정렬

나는 몇 얻으려고 inline하고 inline-block구성 요소는 수직으로 정렬 div. span이 예에서 어떻게 내려 오게됩니까? 난 둘 다 해봤 vertical-align:middle;하고 vertical-align:top;,하지만 아무것도 변경.

HTML :

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSS :

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

결과 :

깡깡이

vertical-align부모 요소가 아닌 정렬되는 요소에 적용됩니다. div의 자식을 세로로 정렬하려면 대신 다음을 수행하십시오.

div > * {
    vertical-align:middle;  // Align children to middle of line
}

참조 : http://jsfiddle.net/dfmx123/TFPx8/1186/

참고 : vertical-align부모의 전체 높이가 아니라 현재 텍스트 줄에 상대적 div입니다. 부모 div가 더 키가 크고 요소를 세로로 가운데에 배치하려면 div의 line-height속성을 대신 설정하십시오 height. 예를 보려면 위의 jsfiddle 링크를 따르십시오 .

부여 vertical-align:top;에서 a& span. 이처럼 :

a, span{
 vertical-align:top;
}

이 http://jsfiddle.net/TFPx8/10/을 확인하십시오.

두 요소를 떠 다니는 것만으로도 같은 결과를 얻을 수 있습니다.

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}

inline-block항목 의 위치를 ​​미세 조정 하려면 상단 및 왼쪽을 사용하십시오.

  position: relative;
  top: 5px;
  left: 5px;

CSS 트릭 감사합니다 !