CSS-文本垂直居中_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:32:45
原创
1301 人浏览过

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

单行文本垂直居中

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

    .outer-line {        border: 1px solid red;        height: 200px;        line-height: 200px;        width: 200px;    }    <div class="outer-line">        博客园-FlyElephant    </div>
登录后复制

多行文本垂直居中

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

    <div class="outer-table">        <div class="inner">            博客园-FlyElephant 原文地址:http://www.cnblogs.com/xiaofeixiang/        </div>    </div>
登录后复制

样式设置:

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

  

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!