Question

它可以在容器中间设置文本，无论其大小如何？

HTML：

.. 本文篇幅较短，显示在中间 Lorem ipsum dolor坐着

and when the text length is long, I want everything to be displayed in the middle
<div class="container">
    <span class="_text">Lorem ipsum dolor sit amet, ipsum loroes eheu </span>
</div>

CSS：

.text {
    position:absolute;
    left:25px;
    top:13px;
    width:120px;
    font-size:11px;
    color:#fff;
}
._text {
    position:absolute;
    left:25px;
    top:7px;
    width:120px;
    font-size:11px;
    color:#fff;
}
.container {
    position:relative;
    background:#010101;
    width:150px;
    height:40px;
}

JSFiddle

Answer 1

您可以通过删除范围的样式（或完全跨度）来实现，并将.container显示为表格单元格。表格单元格允许您垂直对齐其中的文本。

像这样：

.container {
    background:#010101;
    width:150px;
    height:40px;
    font-size:11px;
    color:#fff;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Updated Fiddle

Answer 2

试试这个

.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;
}

here is fiddle

Answer 3

请参阅此解决方案：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;
}

CSS：如何在容器中间显示文本？

3 个答案: