1. 块级元素居中
块级元素的宽度默认是父元素宽度。
以DIV为例,进行测试:
(1)div放在body中,设置了宽度和高度,背景颜色
html:
<!DOCTYPE html>
<html>
<head>
<title>测试ing</title>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="center">
div在父元素中居中
</div>
</body>
</html>
css:
div#center{
width: 300px;
height: 200px;
background: #159;
}
(2)css中设置div其text-align: center;
结果显示,是DIV元素里面的内容在DIV中居中。
(3)那这样说,对于div本身这个元素,就想到盒模型啦
所以方法一:
水平居中:margin-left:auto;margin-right:auto;当然也可以写做margin:0 auto;
垂直居中:估量着margin-top:200px;
或者最开始就写:
margin:200px auto;
好啦,有人说用vertical-align: middle;不就垂直居中啦!可是你会发现没有效果!
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐(那么应该是vertical-align对行内元素有效,对块级元素无效吧)。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
即给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。
其值:
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
其使用:
1.用于内联元素
下面以图像的垂直对齐为例子说明一下vertical-align属性的用法。
img{ vertical-align:middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>
2.用于表格
vertical-align属性可以直接用于表格单元格,效果相当于HTML中的valign属性。
td{ height:40px; vertical-align:middle;}
<table><tr><td>这是一个测试</td><td>这是一个测试</td></tr><tr><td>这是一个测试</td><td>这是一个测试</td></tr></table>
3.用于块元素
vertical-align属性是不适用于块元素的,这就是为什么有些人使用vertical-align属性无效的原因。但是我们可以使用display属性,设置其值为table-cell,将块元素转化为单元格,然后再使用vertical-align属性。
div{width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
<div><img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>
需要注意的是,上面这种方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这种用法,而Chrome、火狐却能支持。
为了兼容ie6/7可以为div添加以下属性
div{
*display:block; *font-size:175px;/*高度为200px, 则200*0.873约为175px* 撑开/ }
方法二:
用定位,算边距呗
div#center{
width: 300px;
height: 200px;
background: #159;
/*margin: 200px auto;******方法一*/
position: absolute;
left: 50%;/*是用的DIV的左边去定位的父元素的50%*/
top: 50%;
margin-left: -150px;/*所以左上都要宽高的一半*/
margin-top: -100px;
}
2.如何让文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。
即line-height和height值相同。
其他可参考http://www.jbxue.com/article/8240.html,讲了块级和内联居中的问题。