답변:
실제로이 경우에는 매우 간단합니다. 이미지에 수직 정렬을 적용하십시오. 모두 한 줄에 있기 때문에 실제로 텍스트가 아니라 정렬하려는 이미지입니다.
<!-- 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>
width:16px;height:16px
다음은 수직 정렬을위한 몇 가지 간단한 기술입니다.
텍스트 요소의 행 높이를 컨테이너의 행 높이와 동일하게 설정하십시오.
<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>
이것이 전반적으로 올바르게 작동하게하려면 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%);
display:table
및 display:table-cell
CSS 선택기는 IE7에서 아래, 물론 제외하고, 잘 작동. 몇 시간 동안 머리카락을 찢은 후에도 여전히 IE7을 사용하는 사람을 다룰 필요가 없다고 결정했습니다.
display:table
다양한 브라우저에서 몇 가지 제한 사항이 있습니다 (IE11 max-height
에서는 요소가 테이블 셀 안에 있으면 작동하지 않음). 경우에 따라 테이블 셀을 사용하여 세로로 정렬하는 것은 좋지 않습니다.
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;
. 최신 브라우저 개발자를위한 훌륭한 업데이트.
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 요소에서 선 상자의 맨 위에 배치하십시오.
사이의 동작의 주요 차이점 vertical-align: middle
과 top
박스의 기준선에 대하여 (이는 모든 수직 정렬을 달성하는데 필요한 목적지 배치함으로써 오히려 느낀다 제 이동 요소이다 예측할 ) 및 라인 박스의 외부 경계에 제 대해 (어떤 더 유형적).
허용 된 답변에 사용 된 기술은 한 줄로 된 텍스트 ( demo ) 에만 작동 하지만 여러 줄로 된 텍스트 ( demo ) 는 작동 하지 않습니다 .
여러 줄로 된 텍스트를 이미지의 세로 가운데에 배치 해야하는 경우 몇 가지 방법이 있습니다 ( 이 CSS-Tricks 기사에서 영감을 얻은 방법 1 및 2 )
CSS :
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
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 */
}
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>
레코드의 경우 정렬 "명령"은 블록 수준 태그가 아닌 인라인 태그 이기 때문에 SPAN에서 작동 하지 않아야합니다 . 인라인 포인트가 텍스트 흐름을 방해하지 않기 때문에 정렬, 여백, 패딩 등과 같은 것은 인라인 태그에서 작동하지 않습니다.
CSS는 HTML 태그를 인라인 및 블록 레벨의 두 그룹으로 나눕니다. "css 블록 대 인라인"을 검색하면 훌륭한 기사가 표시됩니다 ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(핵심 CSS 원칙을 이해하는 것은 그렇게 성가 시게하지 않는 열쇠입니다)
text-align
및 vertical-align
(에의 적용을 제외한 td
기존의 상업적 요소) 특별히 의미 inline
및 inline-block
요소 ( span
, img
, 등).
할 수있는 또 다른 일은 텍스트를의 line-height
이미지 크기로 설정하는 것 <div>
입니다. 그런 다음 이미지를vertical-align: middle;
이것이 가장 쉬운 방법입니다.
margin
이 답변 중 하나에서 아직 해결책을 찾지 못 했으므로 여기 에이 문제에 대한 해결책이 있습니다.
이 솔루션 은 이미지 너비를 알고있는 경우에만 작동합니다.
<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>
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;
}
background:url(../images/red_bullet.jpg) left 3px no-repeat;
나는 일반적으로 대신 3px를 사용 top
합니다. 이 값을 늘리거나 줄이면 이미지를 필요한 높이로 변경할 수 있습니다.
여러 줄 솔루션 :
<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 +에서 작동
혼란 스러울 수 있습니다. 테이블 기능을 사용해보십시오. 이 간단한 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; }
이미지 및 테이블 컨테이너의 크기를 조정하고 원하는대로 작동하도록 조정해야합니다. 즐겨.
먼저 인라인 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>
왜 내비게이션 브라우저에서 렌더링하지 않는지 확실하지 않지만 이미지와 중앙 텍스트가있는 헤더를 표시하려고 할 때 일반적으로 이와 같은 스 니펫을 사용하면 도움이되기를 바랍니다!
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>
아마도 이것을 원할 것입니다 :
<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는 성 가시지 않습니다. 당신은 단지 문서를 읽지 않습니다 . ;피
vertical-align