一二三四网

全部频道

您的当前位置：首页CSS-文本垂直居中_html/css

CSS-文本垂直居中_html/css

来源：一二三四网


文本水平居中可以将text-align设置为center即可，垂直居中的话如果是单纯的设置vertical-align是没办法单独设置成功的，垂直居中的文字分为单行文本和多行文本，主要是两种不同的实现方式。

单行文本垂直居中

设置line-height和height高度一样即可:

 .outer-line { border: 1px solid red; height: 200px; line-height: 200px; width: 200px; } 博客园-FlyElephant

多行文本垂直居中

通过table和table-cell的方式实现垂直居中：

 博客园-FlyElephant 原文地址:http://www.cnblogs.com/xiaofeixiang/

样式设置:

 .outer-table { border: 1px solid red; height: 200px; width: 200px; margin-top: 20px; display: table; } .inner { display: table-cell; vertical-align: middle; }

　　

显示全文