Home >Web Front-end >HTML Tutorial >CSS实现的多行文本垂直居中实例代码_html/css_WEB-ITnose
CSS实现的多行文本垂直居中实例代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:371158browse
CSS实现的多行文本垂直居中实例代码:
将一行文本在容器中垂直居中是非常简单的，只需要两句代码就好了，例如:
div{ width:100px; height:100px; line-height:100px;} 以上代码可以实现单行文本在div中垂直居中效果，只要将div的height属性值和line-height设置为相同就可以了。
但是以上代码并不能实现多行文本垂直居中下过，下面再看一段代码实例:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.wrapper { width:200px; height:200px; background:#F60; font-size:0; }.wrapper:before { content:'.'; display:inline-block; vertical-align:middle; height:100%;}.content { display:inline-block; text-align:center; font-size:16px }</style></head><body><div class="wrapper"> <div class="content">蚂蚁部落欢迎您，只有奋斗才会有美好的未来！</div></div></body></html> 以上代码实现了多行文本垂直居中对齐，这里就不多介绍了，可以直接套用就可以了。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0525/2450.html
最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9626
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css实现带箭头选项卡_html/css_WEB-ITnoseNext article：CSS如何规定鼠标指针的形状_html/css_WEB-ITnose