CSS实现的多行文本垂直居中实例代码_html/css_WEB-ITnose

CSS实现的多行文本垂直居中实例代码:

将一行文本在容器中垂直居中是非常简单的，只需要两句代码就好了，例如:

div{  width:100px;  height:100px;  line-height:100px;} 

以上代码可以实现单行文本在div中垂直居中效果，只要将div的height属性值和line-height设置为相同就可以了。

但是以上代码并不能实现多行文本垂直居中下过，下面再看一段代码实例:

      蚂蚁部落  .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 }   
  
蚂蚁部落欢迎您，只有奋斗才会有美好的未来！

      
查看更多关于CSS实现的多行文本垂直居中实例代码_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109275