[英]How to vertically align text in div which in an inline-block div?
请查看代码:
http://jsfiddle.net/hrhktkbzyy/0kwnL8k8/
<div>
<div class="container divinline">
<div class="row1 ">ROW ONE</div>
<div class="row2">ROW TWO</div>
</div>
CSS
.divinline{
display:inline-block;
}
.container{
line-height:60px;
height:60px;
background:#ffee12;
width:50%;
text-align:left;
}
.row1{
background:#450011;
font-size:12px;
height:50%;
line-height:50%;
}
.row2{
background:#333333;
font-size:12px;
height:50%;
line-height:50%;
color:#FFF;
}
我不知道为什么row1和row2中的文本与两个div的边框重叠。 我想将它们垂直对齐到底部。 有人知道原因吗?
许多thanx。
为什么不直接在.container
height
/ line-height
.container
并移除height:50%;
line-height:50%;
来自.row1
和.row2
。
因此,您的容器类将是:
.container{
line-height:30px; //half previous value
height:30px; //half previous value
background:#ffee12;
width:50%;
text-align:left;
}
而从除去50%的高度row1
和row2
.row1{
background:#450011;
font-size:12px;
}
.row2{
background:#333333;
font-size:12px;
color:#FFF;
}
与Dan的答案类似-http://jsfiddle.net/0kwnL8k8/4/,但我添加了另一个“行”类以用于所有行。 这确实假定高度恒定为30px。
.row {
line-height:30px;
height:50%;
font-size:12px;
}
我刚刚回答了一个类似的问题: 如何在具有百分比高度的div中间垂直对齐文本?
在您的情况下,可能是: http : //jsfiddle.net/0kwnL8k8/5/
.row1:before, .row2:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
请参阅此处链接的答案,以便在发生这种情况时管理多行
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.