多行文字的垂直居中

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。多行文字的垂直居中

代码：内部标签的vertical-align:middle可以省略

 <style>
        div{
            display: table-cell;
            width: 200px;
            height: 300px;
            border: 1px solid #000000;
            color: red;
            font-size: 16px;
            vertical-align: middle;
            padding: 0 10px;
        }
        span{

　　　　　　display:inline-block;

/*vertical-align: middle;*/（可要可不要）
        }
    </style>
</head>
<body>
<div>
    <span>实现的关键是把文字当图片处理。用一个标签将所有的文字封装起来
        设置文字与图片相同的display属性值，然后用处理图片垂直居中的方式
        处理文字的垂直居中即可</span>
</div>
</body>

多行文字的垂直居中

相关推荐