CSS-文本垂直居中_html/css_WEB-ITnose
程序员文章站
2022-05-10 17:53:55
...
文本水平居中可以将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; }
推荐阅读
-
详解HTML5中垂直上下居中的解决方案
-
多行或者单行文本超出两行显示点点点,如果保证内容始终垂直居中?
-
HTML技巧篇:实现元素水平与垂直居中的几种方式
-
Android Span富文本图文混排 - ImageSpan(图文垂直居中)
-
CSS元素(文本、图片)水平垂直居中方法
-
行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型
-
css5种实现垂直居中_html/css_WEB-ITnose
-
CSS-浮动篇float_html/css_WEB-ITnose
-
css基准线研究:垂直对齐的实现-好的、差的和丑陋的_html/css_WEB-ITnose
-
用python正则如何去掉下面文本三个_html/css_WEB-ITnose