码迷,mamicode.com
首页 > Web开发 > 详细

CSS垂直居中

时间:2016-04-22 12:04:09      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

小小的总结一下:水平元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto;

 

首先讨论一下单行时的情况。

毫无疑问,这是最简单的一种情况。

HTML结构如下:

1 <div class="demo">
2     <span>111111111111111111111111111111111111</span>
3 </div>

高度不固定(这种方法同样适用于多行文时的情况,下面就不再讨论)

1 .demo { 
2     text-align: center; 
3     padding-top: 20px; 
4     padding-bottom: 20px;
5 }

高度固定

1 .demo {
2     text-align: center;
3     height: 100px;
4     line-height: 100px;
5 }

接下来,讨论下多行时的情况。

HTML结构如下:

1 <div class="demo">
2     <span>111111111111111111111111111111111111<br />22222222222222222222</span>
3 </div>

高度不固定时只需要添加pading值就可以,不多加讨论了。

高度固定时

方法一:

 

CSS垂直居中

标签:

原文地址:http://www.cnblogs.com/feishuang008/p/5420604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!