CSS: How to display text in the middle of container?

This question already has an answer here:

Vertically align text next to an image? 20 answers

---

You can realize that by deleting the styles of the span (or the span completely) and display the .container as a table-cell. Table-cells will allow you to vertical align the text in it.

Like this:

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

Updated Fiddle

---

try this

.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

---

See this solution: http://jsfiddle.net/nju2ecby/4/

I convert the span in div and for it I set the line-height the same of his container.

.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/41526.html

上一篇: 使用CSS将图像旁边的链接垂直对齐

下一篇: CSS：如何在容器中显示文本？