码迷,mamicode.com
首页 > 其他好文 > 详细

元素水平居中和垂直居中的几种简单方法

时间:2014-06-25 22:16:20      阅读:305      评论:0      收藏:0      [点我收藏+]

标签:style   ext   使用   width   strong   os   

一、如何使元素在水平方向上居中

1. 使用text-align:center。

    在父级元素的CSS样式设置text-align:center。把内部嵌套一个div把它当作文本来对待,不过这个方法有时候是不管用的。

2.在需要居中的元素设置margin:0 auto。

    这句CSS的意思为:设置margin-left和margin-right为自动适应父级元素宽度。所以可以使元素水平居中,不过记得设置其width。

二、如何使元素在垂直方向上居中

1.使图片在垂直方向上居中。

    div{backgroud-position:0 50%} 。当然,这只适用于背景图!

2.使只含文本的元素居中。

    在css里设置它的行高:line-height:xx px。 xx为其本身height值。

3.使包含文本和其他元素都同时居中。

    仅仅设置行高是不够的,应该再加上display:table-cell;vertical-align:middle.这样就可以使其垂直居中。

我以上提到的都是常用的方法,不全面,也没深入讲。还有用CSS expression方法实现水平居中的等等方法。

元素水平居中和垂直居中的几种简单方法,布布扣,bubuko.com

元素水平居中和垂直居中的几种简单方法

标签:style   ext   使用   width   strong   os   

原文地址:http://www.cnblogs.com/jlchen/p/3804534.html

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