나란히 서있는 2 개의 div가 포함 된 div (#wrapper)가 있습니다.
right-div를 세로로 정렬하고 싶습니다. 내 주 래퍼에서 vertical-align : middle을 시도했지만 작동하지 않습니다. 그것은 나를 미치게 만든다!
누군가가 도울 수 있기를 바랍니다.
HTML :
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
CSS :
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
답변
부동 요소에는 운이 없습니다. 수직 정렬을 따르지 않고
display:inline-block
대신 다음 이 필요 합니다.
조심
display: inline-block;
요소 사이의 공백을 실제 공백으로 해석하므로 주의하십시오 . 그렇게 무시하지 않습니다 display: block
.
나는 이것을 추천한다 :
설정 font-size
에 포함 된 요소의 0
(영)과를 재설정 font-size
요소가 너무 좋아에 필요한 값으로
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
여기에서 데모를 참조하십시오. http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
답변
디스플레이 테이블과 디스플레이 테이블 셀을 사용하면이 작업을 매우 쉽게 수행 할 수 있습니다.
#wrapper {
width: 400px;
float: left;
height: auto;
display: table;
border: 1px solid green;
}
#right-div {
width: 356px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
편집 : 실제로 CSS 데스크에서 빠르게 엉망이되었습니다-http : //cssdesk.com/RXghg
다른 편집 : Flexbox를 사용하십시오. 이것은 작동하지만 꽤 구식입니다-http: //www.cssdesk.com/davf5
#wrapper {
display: flex;
align-items: center;
border:1px solid green;
}
#left-div {
border:1px solid blue;
}
#right-div {
border:1px solid red;
}
답변
나는 이것이 고대의 질문이라는 것을 알고 있지만 플로트 수직 정렬 문제에 대한 해결책을 게시하는 것이 유용하다고 생각했습니다.
플로팅하려는 콘텐츠 주위에 래퍼를 만들면 :: after 또는 :: before 의사 선택기를 사용하여 래퍼 내에서 콘텐츠를 수직으로 정렬 할 수 있습니다. 정렬에 영향을주지 않고 원하는 콘텐츠의 크기를 조정할 수 있습니다. 유일한 캐치는 래퍼의 100 % 높이를 작성해야한다는 것입니다 자사의 컨테이너를.
http://jsfiddle.net/jmdrury/J53SJ/
HTML
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
CSS
div {
border:1px solid red;
height:100px;
width:100%;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.floater {
float:right;
display:inline-block;
height:100%;
box-sizing: border-box;
}
.centered {
border:1px solid blue;
height: 30px;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
h1 {
margin:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
height:100%;
content:'';
font-size:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
답변
가능한 해결책은 https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/에 지정된대로 div
flex
항목이 정렬 된 래퍼를 만드는 것 입니다.center
답변
수레를 사용하지 않기 위해 최선을 다하지만 필요한 경우 다음 줄을 사용하여 가운데에 수직으로 정렬합니다.
position: relative;
top: 50%;
transform: translateY(-50%);