[html] 왜 세로 정렬 : 중간이 스팬 또는 div에서 작동하지 않습니까?
다른 요소 내 에서 span
또는 div
요소 를 세로로 가운데에 맞추려고합니다 div
. 그러나 내가 넣을 때 vertical-align: middle
아무 일도 일어나지 않습니다. display
두 요소 의 속성을 변경하려고 시도했지만 아무것도 작동하지 않는 것 같습니다.
이것은 내가 현재 내 웹 페이지에서하고있는 일입니다.
.main {
height: 72px;
vertical-align: middle;
border: 1px solid black;
padding: 2px;
}
.inner {
vertical-align: middle;
border: 1px solid red;
}
.second {
border: 1px solid blue;
}
<div class="main">
<div class="inner">
This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>
작동하지 않는 것을 보여주는 구현의 jsfiddle은 다음과 같습니다. http://jsfiddle.net/gZXWC/
답변
이것은 가장 좋은 방법 인 것 같습니다-원래 게시물 이후로 시간이 지났으며 지금해야 할 일입니다 .http : //jsfiddle.net/m3ykdyds/200
/* CSS file */
.main {
display: table;
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
/* HTML File */
<div class="main">
<div class="inner"> This </div>
</div>
답변
CSS3 사용하기 :
<div class="outer">
<div class="inner"/>
</div>
CSS :
.outer {
display : flex;
align-items : center;
justify-content: center;
}
참고 : 이전 IE에서는 작동하지 않을 수 있습니다
답변
이것을 시도하고 나를 위해 잘 작동합니다 :
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
답변
div를 포함하는 것과 같은 높이로 선 높이를 설정하면 작동합니다.
데모 http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
.inner {
line-height:72px;
border: 1px solid #000000;
}
답변
혹시 인 flexbox … 장소에 의존 할 수 없습니다 .child
로 .parent
의 중심. 픽셀 크기를 알 수 없을 때 (즉, 항상) IE9 +에 문제가 없을 때 작동
.parent { position: relative; }
.child {
position: absolute;
top : 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform : translate(-50%, -50%);
}
<div class="parent" style="background:lightyellow; padding:6em">
<div class="child" style="background:gold; padding:1em">—</div>
</div>
답변
vertical-align: middle
내부 요소를 입어야 합니다외부 요소가 아닌 . line-height
외부 요소 의 속성을 외부 요소 의 속성과 일치하도록 설정하십시오 height
. 다음 설정 display: inline-block
및 line-height: normal
내측 요소. 이렇게하면 내부 요소의 텍스트가 일반 선 높이로 줄 바꿈됩니다. Chrome, Firefox, Safari 및 IE 8 이상에서 작동
.main {
height: 72px;
line-height:72px;
border: 1px solid black;
}
.inner {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="main">
<div class="inner">Vertically centered text</div>
</div>
답변
나는 누군가를 돕는 경우를 대비하여 래퍼 div의 중앙에있는 모든 것을 정렬하기 위해 이것을 사용했습니다.
div.wrapper {
/* --- This works --- */
display: flex;
/* Align Vertically */
align-items: center;
/* Align Horizontally */
justify-content: center;
/* --- ---------- ----- */
width: 100%;
height:100px;
background-color: blue;
}
div.inner {
width: 50px;
height: 50px;
background-color: orange;
}
<div class="wrapper">
<div class="inner">
</div>
</div>