CSS:如何在容器中显示文本?

这个问题在这里已经有了答案:

  • 垂直对齐图像旁边的文字? 20个答案

  • 您可以通过删除跨度(或完全跨度)的样式并将.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

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

    下一篇: How to vertically center text next to image?