多行文字的垂直居中

与其他一些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>

优质内容筛选与推荐>>
1、策略模式（Strategy）
2、codeforces 589G:线段树+二分
3、【模板】最长公共子序列
4、正则表达式的基本语法（轉自放心去飛）
5、关于错误Access Violation和too many consecutive exceptions 解决方法

朋友将在看一看看到

分享想法到看一看