이미지 옆에 텍스트를 세로로 정렬 하시겠습니까?


1966

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>


12
흥미로운 기사가 ​​있습니다 : 이해vertical-align
Phaedrus

답변:


2251

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

<!-- 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>


188
"모두 한 줄로되어 있기 때문에 텍스트가 아니라 정렬하려는 이미지입니다." -아니요, 이미지가있는 곳에 괜찮습니다. 우리는 텍스트가 정렬되기를 원합니다. 이미지가 아닙니다. -나는 이것이 작동한다는 것을 얻습니다 (일부 상황에서 예 : 이미지에서 "float : left"를 사용하지 않을 때 ...). 물리적으로 텍스트를 수직 중간으로 옮기는 것은 기괴하고 직관적이지 않습니다. 대신 이미지 옆에 속성을 적용해야합니다.
BrainSlugs83

35
@ BrainSlug83 확실히 기괴하지는 않지만, 초보자가 어떻게 이것에 의해 넘어 질 수 있는지 알 수 있습니다. 기본적으로 이미지는 텍스트 기준선에 배치됩니다. 텍스트를 기준으로 이미지가 첨부 된 위치로 이동하기 만하면됩니다. float : left를 사용하는 경우 이미지와 텍스트가 포함 된 블록 또는 텍스트 자체에서 수행해야합니다.
jamesrom

14
@ BrainSlugs83 반 직관적 인 것으로 볼 수 있다는 데 동의했습니다. CSS에 따르면, 이미지를 텍스트의 중앙에 위치시키기 때문에 약간의 정신적 변화가 필요합니다. 이미지의 텍스트가 아닙니다.
Greg Pettit

6
span글꼴 크기 를 늘리면 작동하지 않습니다 . 내 답변을 참조하십시오 .
Mori

2
그러나 이미지 크기를 더 작은 크기 (예 width:16px;height:16px
Matthieu Charbonnier

340

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

한 줄 세로 정렬 : 중간

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

<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%);

15
display:tabledisplay:table-cellCSS 선택기는 IE7에서 아래, 물론 제외하고, 잘 작동. 몇 시간 동안 머리카락을 찢은 후에도 여전히 IE7을 사용하는 사람을 다룰 필요가 없다고 결정했습니다.
banncee

2
display:table다양한 브라우저에서 몇 가지 제한 사항이 있습니다 (IE11 max-height에서는 요소가 테이블 셀 안에 있으면 작동하지 않음). 경우에 따라 테이블 셀을 사용하여 세로로 정렬하는 것은 좋지 않습니다.
jahu

97

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

div { display:flex; }


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

방법 1 :

div { align-items:center; }

데모


방법 2 :

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

데모


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


이미지 옆 또는 이미지 사이의 텍스트를 가운데에 맞추려면 (가로로 페이지에) justify-content: center;간격을 추가 하고 간격을 두어야합니다 (<br/> 태그를 사용하지 않음) padding: 1em;. 최신 브라우저 개발자를위한 훌륭한 업데이트.
CSS

이것은 잘 작동했습니다. 나는 다른 모든 답변을 시도했지만 그들이 어느 정도 일한 동안 그것은 효과가 없었습니다. 정렬 할 약 3 줄의 텍스트가 있었고이 답변은 완벽하게 작동했습니다. 감사합니다 @Mori
semaj0

87

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: middletop박스의 기준선에 대하여 (이는 모든 수직 정렬을 달성하는데 필요한 목적지 배치함으로써 오히려 느낀다 제 이동 요소이다 예측할 ) 및 라인 박스의 외부 경계에 제 대해 (어떤 더 유형적).


1
나는 최고 작품과 최저 작품을 발견했지만 중간은 아닙니다. 기본적으로 "중간"은 상단과 하단 사이의 중간으로 정의되지 않습니다. 그것은 "텍스트보다 키가 클 때 두 가지 방법으로 똑같이 튀어 나오십시오"를 의미합니다. 그리고 여기서는 세로 정렬이 필요하지 않습니다.
커티스

61

허용 된 답변에 사용 된 기술은 한 줄로 된 텍스트 ( 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 */
}

3
이미지가 텍스트보다 큰 경우 (높이에서)이 방법이 제대로 작동합니다. 그러나 이미지가 작 으면 마지막 이미지를 제외한 모든 이미지가 슬프게 실패합니다
Thomas

28

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

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

19

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


2
줄 높이를 30px로 설정했지만 여전히 작동하지 않습니다.
sam

12

기본적으로 CSS3으로 내려 가야합니다.

-moz-box-align: center;
-webkit-box-align: center;

11

레코드의 경우 정렬 "명령"은 블록 수준 태그가 아닌 인라인 태그 이기 때문에 SPAN에서 작동 하지 않아야합니다 . 인라인 포인트가 텍스트 흐름을 방해하지 않기 때문에 정렬, 여백, 패딩 등과 같은 것은 인라인 태그에서 작동하지 않습니다.

CSS는 HTML 태그를 인라인 및 블록 레벨의 두 그룹으로 나눕니다. "css 블록 대 인라인"을 검색하면 훌륭한 기사가 표시됩니다 ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(핵심 CSS 원칙을 이해하는 것은 그렇게 성가 시게하지 않는 열쇠입니다)


2
text-alignvertical-align(에의 적용을 제외한 td기존의 상업적 요소) 특별히 의미 inlineinline-block요소 ( span, img, 등).
케빈 페노

11

line-height:30px텍스트가 이미지와 정렬되도록 범위에 사용하십시오 .

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

11

할 수있는 또 다른 일은 텍스트를의 line-height이미지 크기로 설정하는 것 <div>입니다. 그런 다음 이미지를vertical-align: middle;

이것이 가장 쉬운 방법입니다.


3
콘텐츠가 여러 줄로 분산되어 있으면 올바르게 작동하지 않습니다.
Ahmad Alfy

그리고 왜 줄 높이 : 100 %가 아닌가?
Jean Paul AKA el_vete

8

margin이 답변 중 하나에서 아직 해결책을 찾지 못 했으므로 여기 에이 문제에 대한 해결책이 있습니다.

이 솔루션 은 이미지 너비를 알고있는 경우에만 작동합니다.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

1
정확한 해결책은 다음과 같습니다. 여러 줄 문자에도 적용됩니다. 위의 내용은 여러 줄에 적합하지 않습니다.
efirat

6
background:url(../images/red_bullet.jpg) left 3px no-repeat;

나는 일반적으로 대신 3px를 사용 top합니다. 이 값을 늘리거나 줄이면 이미지를 필요한 높이로 변경할 수 있습니다.


이미지 크기를 알 수 없거나 동적 인 상황에서는 도움이되지 않습니다.
Dan

6

이 범위 속성 작성

span{
    display:inline-block;
    vertical-align:middle;
}

사용 display:inline-block;당신이 사용하는 경우 vertical-alignassosiated 속성이 property.Those을


6

속성 을 inline element사용하여 이미지를 설정할 수 있습니다display

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>


3

예를 들어 jQuery mobile의 버튼에서이 스타일을 이미지에 적용하여 약간 조정할 수 있습니다.

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

2

여러 줄 솔루션 :

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

모든 브라우저 및 ie9 +에서 작동


2

혼란 스러울 수 있습니다. 테이블 기능을 사용해보십시오. 이 간단한 CSS 트릭을 사용하여 웹 페이지 중앙에 모달을 배치합니다. 그것은 큰 브라우저를 지원합니다 :

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

CSS 부분 :

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

이미지 및 테이블 컨테이너의 크기를 조정하고 원하는대로 작동하도록 조정해야합니다. 즐겨.


0

먼저 인라인 CSS 는 전혀 권장되지 않으며 실제로 HTML을 엉망으로 만듭니다.

이미지와 스팬을 정렬하려면 간단히 할 수 있습니다 vertical-align:middle.

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>


2
인라인 CSS를 사용해야하는 많은 이유가 있습니다. 반응 : 예를 들어 JS의 CSS .
jlyonsmith

0

왜 내비게이션 브라우저에서 렌더링하지 않는지 확실하지 않지만 이미지와 중앙 텍스트가있는 헤더를 표시하려고 할 때 일반적으로 이와 같은 스 니펫을 사용하면 도움이되기를 바랍니다!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

-4

아마도 이것을 원할 것입니다 :

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

다른 사람들이 제안했듯이 vertical-align이미지를 사용해보십시오 .

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS는 성 가시지 않습니다. 당신은 단지 문서를 읽지 않습니다 . ;피


6
그리고 이미지 높이가 동적이라면? PS는 CSS에 대한 문서가 존재하기 때문에 성가 시거나 직관적이지 않습니다.
sam

귀찮고 직관적입니까? 귀하의 질문에 이미지의 높이가 동적인지 여부를 지정하지 않았으므로 고정 높이가 고정하려는 높이라고 가정했습니다.
strager

2
나는 이것에 샘과 함께 있습니다. 나는 img 높이가 무엇이든 항목이 중심에 있어야한다고 가정했습니다. 나는 우리 모두 조금 식을 수 있다고 생각합니다.
Michael Haren
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.