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

질문자 :sam

왜 vertical-align: middle 작동하지 않습니까? 그러나 vertical-align: top 이 작동합니다.

 span{ vertical-align: middle; }

 <div> <img src="https://via.placeholder.com/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://via.placeholder.com/60x60"> <span style="">Works.</span> </div>

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

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

 .box { display: flex; align-items:center; }

 <div class="box"> <img src="https://via.placeholder.com/60x60"> <span style="">Works.</span> </div>

Michael Haren

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

한 줄 세로 정렬:가운데

이것은 쉽습니다. 텍스트 요소의 줄 높이를 컨테이너의 줄 높이와 동일하게 설정하십시오.

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

가변 컨테이너 높이 vertical-align:middle

transform: translateY 속성을 사용하므로 다른 솔루션보다 약간 더 현대적인 브라우저가 필요합니다. ( http://caniuse.com/#feat=transforms2d )

다음 세 줄의 CSS를 요소에 적용하면 상위 요소의 높이에 관계없이 상위 요소 내에서 수직으로 중앙에 배치됩니다.

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

Adam Lassek

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

 div { display:flex; }

이제 모든 콘텐츠의 정렬을 가운데에 맞추는 두 가지 방법이 있습니다.

방법 1:

 div { align-items:center; }

데모

---

방법 2:

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

데모

---

img 에서 다른 너비와 높이 값을 시도 span 에서 다른 글꼴 크기 값을 시도하면 항상 컨테이너 중간에 유지되는 것을 볼 수 있습니다.

Mori

완벽하게 중앙에 오도록 하려면 두 요소에 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: top span 요소의 top을 선택한 다음 라인 상자의 상단에 위치시킵니다.

vertical-align: middle 과 top 사이의 동작의 주요 차이점은 첫 번째는 상자의 기준선(모든 수직 정렬을 수행하는 데 필요한 모든 위치에 배치되므로 예측할 수 없는 느낌)을 기준으로 요소를 이동하고 두 번째는 외부 경계를 기준으로 한다는 것입니다. 라인 박스(더 확실함).

christopheraue

허용 대답에 사용 된 기술은 단일 줄 지어 텍스트 (만 작동 데모 ),하지만 멀티 라인 텍스트 ( 데모 ) -이 언급 한 바와 같이.

여러 줄로 된 텍스트를 이미지에 세로로 중앙에 배치해야 하는 경우 몇 가지 방법이 있습니다( 이 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 */ }

Danield

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

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

HTMLnewBie

line-height 를 div의 높이로 설정해야 하기 때문에

Ikke

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

CSS는 HTML 태그를 인라인과 블록 수준의 두 그룹으로 나눕니다. "css block vs inline"을 검색하면 훌륭한 기사가 나타납니다...

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

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

David

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

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

Dan

텍스트가 이미지와 정렬되도록 범위에 대해 line-height:30px

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

Touhid Rahman

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

그게 진심으로 가장 쉬운 방법입니다.

nullpoint81

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; }

luukvhoudt

이 범위 속성을 작성하십시오.

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

display:inline-block; 사용 vertical-align 속성을 사용하면 연관 속성입니다.

Mr.Pandya

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

top 대신 3px를 사용합니다. 해당 값을 늘리거나 줄이면 이미지를 원하는 높이로 변경할 수 있습니다.

AspiringCanadian

display 속성을 사용하여 inline element 로 설정할 수 있습니다.

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

Super User

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

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

den232

여러 줄 솔루션:

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+에서 작동

Benjamin Crouzier

혼란스러울 수 있습니다. 동의합니다. 테이블 기능을 활용해 보세요. 이 간단한 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; }

원하는 대로 작동하려면 이미지와 테이블 컨테이너의 스타일을 지정하고 크기를 조정해야 합니다. 즐기다.

CodeGems

CSS에서 flex property 을 사용합니다.

align-items:center; 사용하여 in flex를 사용하여 텍스트를 세로로 가운데 정렬하려면; justify-content:center; 사용하여 in flex를 사용하여 텍스트를 가로 가운데 정렬하려는 경우; .

 div{ display: flex; align-items: center; }

 <div> <img src="http://lorempixel.com/30/30/" alt="small img" /> <span>It works.</span> </div>

CSS에서 table-cell 사용하기

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

 <div> <img src="http://lorempixel.com/30/30/" alt="small img" /> <span>It works.</span> </div>

Rayees AC

첫째, 인라인 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>

Alireza

탐색 브라우저에서 렌더링되지 않는 이유는 확실하지 않지만 일반적으로 이미지와 가운데 텍스트가 있는 헤더를 표시하려고 할 때 이와 같은 스니펫을 사용합니다. 도움이 되길 바랍니다!

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>

Jean Paul -JP A.K.A el_vete

 div{ display: flex; align-items: center; } <div> <img src="http://lorempixel.com/30/30/" alt="small img" /> <span>It works.</span> </div>

Priya Maheshwari

<!DOCTYPE html> <html> <head> <style> .block-system-branding-block { flex: 0 1 40%; } @media screen and (min-width: 48em) { .block-system-branding-block { flex: 0 1 420px; margin: 2.5rem 0; text-align: left; } } .flex-containerrow { display: flex; } .flex-containerrow > div { justify-content: center; align-items: center; } .flex-containercolumn { display: flex; flex-direction: column; } .flex-containercolumn > div { width: 300px; margin: 10px; text-align: left; line-height: 20px; font-size: 16px; } .flex-containercolumn > site-slogan {font-size: 12px;} .flex-containercolumn > div > span{ font-size: 12px;} </style> </head> <body> <div id="block-umami-branding" class="block-system block- system-branding-block"> <div class="flex-containerrow"> <div> <a href="/" rel="home" class="site-logo"> <img src="https://placehold.it/120x120" alt="Home"> </a> </div><div class="flex-containerrow"><div class="flex-containercolumn"> <div class="site-name "> <a href="/" title="Home" rel="home">This is my sitename</a> </div> <div class="site-slogan "><span>Department of Test | Ministry of Test | TGoII</span></div> </div></div> </div> </div> </body> </html>

Pradeep

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

 <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는 짜증나지 않습니다. 당신은 단지 문서를 읽지 않습니다. ;NS

strager

출처 : http:www.stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image