你好我有一个div(#wrapper),包含2个div并排.我希望右边的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>
Run Code Online (Sandbox Code Playgroud)
我的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;}
Run Code Online (Sandbox Code Playgroud)
yun*_*zen 66
浮动元素你没有运气.他们不服从垂直对齐,
你需要,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;
}
Run Code Online (Sandbox Code Playgroud)
请参阅此处的演示:http://codepen.io/HerrSerker/pen/mslay
#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;
}
Run Code Online (Sandbox Code Playgroud)
Spa*_*ers 20
您可以使用显示表和显示表格单元格轻松完成此操作.
#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;
}
Run Code Online (Sandbox Code Playgroud)
编辑:实际上很快就在CSS Desk上乱搞了 - 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;
}
Run Code Online (Sandbox Code Playgroud)
Jus*_*ury 11
我意识到这是一个古老的问题,但我认为将浮点垂直对齐问题的解决方案发布是有用的.
通过在您想要浮动的内容周围创建一个包装器,您可以使用:: after或:: before伪选择器在包装器中垂直对齐您的内容.您可以根据需要调整该内容的大小,而不会影响对齐.唯一的问题是包装必须填充其容器的100%高度.
http://jsfiddle.net/jmdrury/J53SJ/
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
Run Code Online (Sandbox Code Playgroud)
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;
}
Run Code Online (Sandbox Code Playgroud)
我尽力避免使用浮动...但是 - 当需要时,我使用以下几行垂直对齐到中间:
position: relative;
top: 50%;
transform: translateY(-50%);
Run Code Online (Sandbox Code Playgroud)