3 块元素自身水平居中(不确定宽度的块):
在其他的一些文章中,看到有不少方法来介绍不确定宽度的块的居中的。
其实简单点说,不需要这么麻烦。我们可以这样来理解,没有明确设定宽度的block,根据块级元素的性质,它默认是独占一行的,所以这个时候block本身就是浏览器窗口的宽度,就不必要来设置水平居中了。
若是此时对块中的内容进行居中的话:
如果块元素的子元素也为块元素,就对子元素使用margin auto一类的方式就好啦;
如果块级元素的子元素为行内元素,就用我们一开始介绍的text-align也就可以解决;
对于子元素为块元素的,也可以用display设置为inline然后再用text-align。
(这些在本文其他地方也都说过了)
4 vertical-align用于行内元素中的垂直居中
vertical-align,这个可以用的很复杂。看了一些文章和例子,自己也有点小混乱,只说一下最简单的用法:
这个属性用于
1、内联元素(以及被转化为内联元素的块元素)
2 、display设置为table-cell的元素,
在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。
3、<td><tr>这样的元素
这样的写法:vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性,对它的子元素中的文字和图片也是起作用的。但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是类似的。
5 块级元素中的文字图片垂直居中(针对块的高度确定的,这个是从另一个博客上看到的,真的很实用哦,如果块内只有这些文字的话)
文字在层(块级元素)中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
复制代码
<div style=”line-height:500px;height:500;”></div>
6 块级元素中的文字图片垂直居中(块的高度不确定的)
在块的高度不确定的情况下,其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话,那就自然垂直居中了,其实就不必特意要设置。
如果非要设置什么的话,比如希望块大一些,文字在块中垂直居中好看一点,可以设置内边距,如padding-top:20px;padding-bottom:20px;
当然,如果上下内边距设置的不一样,就自然不居中了。
7 块级元素自身的垂直居中
设置块级元素自身在父元素中的垂直居中,可以参照块级元素的水平居中的方法(上面说过),设置外边距即可。如果不想设置水平居中,只要设置上下外边距为auto就好。










