我在容器 div 中有两个 div。一个需要向左浮动,另一个向右浮动。它们也都需要在父元素内垂直居中。我怎样才能做到这一点?
<div id='parent'>
<div id='left-box' class='child'>Some text</div>
<div id='right-box' class='child'>Details</div>
</div>
如果没有应用 float ,则它们与此 css 垂直对齐到中间
.child{ display:inline-block; vertical-align:middle; }
但是添加#right-box{ float: right;
导致 child 失去他们的垂直对齐。我做错了什么?
谢谢大家
最佳答案
here 是您需要的解决方案的在线演示
它是用这个 html 制作的:
<div id='parent'>
<div id='left-box' class='child'>Some text</div>
<div id='right-box' class='child'>Details</div>
</div>
和这个 CSS:
#parent {
position: relative;
/* decoration */
width: 500px;
height: 200px;
background-color: #ddd;
}
.child {
position: absolute;
top: 50%;
height: 70px;
/* if text is one-line, line-height equal to height set text to the middle */
line-height: 70px;
/* margin-top is negative 1/2 of height */
margin-top: -35px;
/* decoration */
width: 200px;
text-align: center;
background-color: #dfd;
}
#left-box { left: 0; }
#right-box { right: 0; }
关于html - 如何垂直对齐两个 float 的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10561162/