CSS:如何在容器中显示文本?
这个问题在这里已经有了答案:
您可以通过删除跨度(或完全跨度)的样式并将.container
显示为表格单元来实现。 表格单元格将允许您垂直对齐文本。
喜欢这个:
.container {
background:#010101;
width:150px;
height:40px;
font-size:11px;
color:#fff;
display: table-cell;
text-align: center;
vertical-align: middle;
}
更新小提琴
尝试这个
.text{
position:absolute;
left:25px;
top:13px;
width:120px;
font-size:11px;
color:#fff;
}
._text{
font-size:11px;
color:#fff;
}
.container {
position:relative;
background:#010101;
width:150px;
height:40px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
这里是小提琴
看到这个解决方案:http://jsfiddle.net/nju2ecby/4/
我在div中转换span,为此我设置了line-height与他的容器相同。
.text {
font-size:11px;
color:#fff;
margin: 0px auto;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
._text {
font-size:11px;
color:#fff;
margin: 0px auto;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
.container {
background:#010101;
width:450px;
height:150px;
}
链接地址: http://www.djcxy.com/p/41525.html