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

인라인/인라인 블록 요소의 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-Tricks 감사합니다!

언급URL : https://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements