이미지 옆에 텍스트를 세로로 정렬 하시겠습니까? 하지 않습니까? 그럼에도 불구하고 vertical-align:

왜 vertical-align: middle작동 하지 않습니까? 그럼에도 불구하고 vertical-align: top 작동 합니다.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>
스 니펫 확장

답변

실제로이 경우에는 매우 간단합니다. 이미지에 수직 정렬을 적용하십시오. 모두 한 줄에 있기 때문에 실제로 텍스트가 아니라 정렬하려는 이미지입니다.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>
스 니펫 확장

FF3에서 테스트되었습니다.

이제이 유형의 레이아웃에 flexbox를 사용할 수 있습니다.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>
스 니펫 확장

답변

다음은 수직 정렬을위한 몇 가지 간단한 기술입니다.

한 줄 세로 정렬 : 중간

텍스트 요소의 행 높이를 컨테이너의 행 높이와 동일하게 설정하십시오.

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

여러 줄 세로 정렬 : 아래

컨테이너를 기준으로 내부 div를 절대적으로 배치하십시오.

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

여러 줄 세로 정렬 : 중간

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

IE <= 7의 고대 버전을 지원해야하는 경우

이것이 전반적으로 올바르게 작동하게하려면 CSS를 약간 해킹해야합니다. 다행히도 우리에게 유리한 IE 버그가 있습니다. 설정 top:50%용기와 top:-50%내부 DIV에, 당신은 동일한 결과를 얻을 수 있습니다. IE가 지원하지 않는 다른 기능인 고급 CSS 선택기를 사용하여 두 가지를 결합 할 수 있습니다.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

가변 컨테이너 높이 세로 정렬 : 중간

이 솔루션은 transform: translateY속성 을 사용하기 때문에 다른 솔루션보다 약간 더 최신 브라우저가 필요 합니다. ( http://caniuse.com/#feat=transforms2d )

요소에 다음 3 줄의 CSS를 적용하면 부모 요소의 높이에 관계없이 부모 내에서 세로로 가운데에 배치됩니다.

position: relative;
top: 50%;
transform: translateY(-50%);

답변

div플렉스 컨테이너로 변경하십시오 .

div { display:flex; }

이제 모든 내용의 정렬을 중앙에 맞추는 두 가지 방법이 있습니다.

방법 1 :

div { align-items:center; }

데모

방법 2 :

div * { margin-top:auto; margin-bottom:auto; }

데모

에서 다른 너비와 높이 값을 사용 img하고 다른 글꼴 크기 값 span을 사용하면 컨테이너의 중간에 항상 유지됩니다.

답변

vertical-align: middle완벽하게 중앙에 오게하려면 두 요소 모두 에 적용 해야합니다.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>
스 니펫 확장

허용 대답은 (에 정의로 옆에있는 텍스트의 x 높이의 절반 주위에 중심을 아이콘을 수행 CSS 사양 ). 텍스트에 오름차순 또는 내림차순이 맨 위 또는 맨 아래에 있으면 충분할 수 있지만 약간 떨어져 보일 수 있습니다.

왼쪽에는 텍스트가 정렬되어 있지 않으며 오른쪽에는 위와 같습니다. 이 기사 에서 vertical-align에 대한 라이브 데모를 찾을 수 있습니다 .

vertical-align: top시나리오에서 왜 작동 하는지 누군가 이야기 했습니까? 질문의 이미지는 아마도 텍스트보다 키가 크므로 줄 상자의 위쪽 가장자리를 정의합니다. vertical-align: topspan 요소에서 선 상자의 맨 위에 배치하십시오.

사이의 동작의 주요 차이점 vertical-align: middle과 top박스의 기준선에 대하여 (이는 모든 수직 정렬을 달성하는데 필요한 목적지 배치함으로써 오히려 느낀다 제 이동 요소이다 예측할 ) 및 라인 박스의 외부 경계에 제 대해 (어떤 더 유형적).

답변

허용 된 답변에 사용 된 기술은 한 줄로 된 텍스트 ( demo ) 에만 작동 하지만 여러 줄로 된 텍스트 ( demo ) 는 작동 하지 않습니다 .

여러 줄로 된 텍스트를 이미지의 세로 가운데에 배치 해야하는 경우 몇 가지 방법이 있습니다 ( 이 CSS-Tricks 기사에서 영감을 얻은 방법 1 및 2 )

방법 # 1 : CSS 테이블 ( FIDDLE ) (IE8 + ( caniuse ))

CSS :

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

방법 # 2 : 컨테이너의 유사 요소 ( FIDDLE ) (IE8 +)

CSS :

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

방법 # 3 : Flexbox ( FIDDLE ) ( caniuse )

CSS (위의 바이올린에는 공급 업체 접두사가 포함되어 있음) :

div {
    display: flex;
    align-items: center;
}
img {
    min-width: 200px; /* width of image */
}

답변

이 코드는 IE 및 FF에서 작동합니다.

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

답변

line-height이것이 작동하려면 div의 높이 로 설정해야하기 때문에