왜 won& # 39, t '수직 정렬: 중간 '작동합니까? 그런데 '수직 정렬: 작동합니까 상단형 '않습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
끝 - < 스니핏 >;!
사실, 이 경우 it& # 39 의 아주 간단합니다. 수직 적용하십시오 정렬할지 이미지를 삭제합니다. # 39 (all in one), s, s 라인, 이후 it& it& # 39 정렬되고 정말 원하는 이미지를 아닌 텍스트입니다.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
<!-- 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 에서 테스트되었습니다.
이제 이런 유형의 레이아웃뿐만 플렉상자 사용할 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.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 기준으로 컨테이너입니다 nnt 포지셔닝하십시오
<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>
<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>
이 솔루션의 경우, 다른 것보다 조금 더 현대적인 브라우저 솔루션을 사용할 수 있기 때문에 '변환: 트란스라트리 '재산이잖아 (http://caniuse.com/ # 성과 = transforms2d)
Css 는 다음의 세 가지 요소에 적용 선 안에서 상관없이 세로일 centre) 의 모 모피쳐 요소:
position: relative;
top: 50%;
transform: translateY(-50%);
Div '에' 변경하십시오 flex 컨테이너입니다:
div {display:flex;}
< br>; 이제 두 가지 방법 가운데 정렬을 위해 축복내린 내용:
div {align-items:center;}
div * {margin-top:auto; margin-bottom:auto;}
다른 값을 다른 글꼴 크기 값 '에 대한 폭과 높이를 img' 와 '와' ll see 거주하리라 스팬할 you& # 39, 그들은 항상 중간에 컨테이너입니다.
'수직 정렬 적용할 수 있습니다. 그 가운데 '를 중심으로 할꺼이나 요소를 모두 완벽하게.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
끝 - < 스니핏 >;!
이 [수락됨 오토메이티드] (https://stackoverflow.com/a/489394/3323185) 가 중앙에 약 절반은 텍스트의 x 높이 옆에 아이콘 (정의된 대로 [css 사양] (http://www.w3.org/TR/CSS2/visudet.html # 수직 프로페데프 맞추십시오.)). 하지만 조금 오프하도록 볼 수 있는 충분한 수 있는 경우 또는 descenders 텍스트와 상승자 가운데 서서 그냥 dell. 위쪽이나 아래쪽:
텍스트 정렬되지 않은 것은 왼쪽에서 오른쪽, 위 그림 참조). 이 라이브 데모를 찾아볼 수 있다. [관한 기사를 수직 정렬] (http://christopheraue.net/2014/03/05/vertical-align/ # 아이콘을 중심으로).
행동 사이의 차이점은 '수직 정렬: 첫 번째 요소를 기준으로 상위 '중간' 와 's # 39 기준선까지의 box& 에로남이네 이동, 즉 정렬을 수행하는 데 필요한 모든 곳에서 수직 및 카타시안 배치된 느낌이 예측할 수 없는 것이 아니라 ) 와 두 번째 상대치 바깥쪽의 니며 선의 상자 (원하는거요 더 알기 쉬운).
이 기술을 사용할 수 있습니다 단일 앞에 줄을 선 오토메이티드 수락됨 사용되는 텍스트 ([데모] [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 */
}
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
애디슨에게, 맞춤에는 " commands"; # 39 의 작동합니까 shouldn&, t, a 인-라인 스팬할 이기 때문에 아니라 블록 태그 태그. # 39 와 같은 것들을 맞춤에는, 여백, 패딩, 상술합니다 won& 요점이지 방해할 수 있기 때문에, t 작동합니까 협력하였습니다 인-라인 태그번호 인라인 없는 텍스트 흐름.
CSS HTML 태그를 분할합니다 것가운데 두 그룹으로: 인-라인 및 블록. Css 블록 vs inline" 검색 "; 표시되며, 위대한 기사.
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(이해가 가지 않고 있어 매우 중요한 핵심 CSS 이 상당히 귀찮은)
<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;
}
인라인 이미지로 '요소' 속성 '디스플레이' 를 사용하여 설정할 수 있습니다.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. > 거짓값 -;
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
끝 - < 스니핏 >;!
Multiline 해결책:
<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; }
참고 할 때 사용할 수 있도록 스타일과 이미지 크기 조정 및 테이블 컨테이너입니다 하고 있다. 즐기세요.
우선 inline CSS 를 전혀 사용하지 않는 것이 좋습니다 정말 엉망하지 up your HTML.
단순히 정렬하기 위해 할 수 있습니다 '이미지와 스팬합니다 중간 수직 맞추십시오.'. <! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
.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>