css水平显示,CSS中元素水平居中显示的要领

用CSS让元素居中显示并不是件很基本

的事情。同样的CSS居中配置

在不同阅读

器中的表现也各有千秋。本文就介绍了在CSS中多见

的几种让元素水平居中显示的要领

。

1.运用

自动外边距实现居中

CSS中首选的让元素水平居中的要领

就是运用

margin属性—将元素的margin-left和margin-right属性配置

为auto即可。在实际运用

中，我们可以为这些须要

居中的元素建立

一个起容器作用的div。须要

特别留心

的一点就是，必须为该容器指定宽度：

在大多数主流阅读

器中，这种要领

都非常有效，即使是Windows平台上的IE6，在其标准兼容模式(compliance mode)下也可以

够正常显示。但不幸的是，在更低版本的IE中，这种配置

却并不能实现居中效果。所以若想在实际项目中运用

这种要领

，那么就要确保用户的IE阅读

器版本不低于6.0。

尽管在支持上不尽如人意，但大多数设计师都建议尽可能地运用

这种要领

。该要领

也被认为是在各种用CSS实现元素水平居中要领

中最正确、最合理的一种。

2.运用

text-align实现居中

另一种实现元素居中的要领

是运用

text-align属性，将该属性值配置

为center并使用

到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数阅读

器，所以在某些情况下也自然必不可少。

之所以说它是hack，是因为这种要领

并没有将文本属性使用

到文本上，而是使用

到了作为容器的元素上。这也给我们带来了额外的工作。在建立

好布局必须的div之后，我们要按照如下代码为body使用

text-align属性：

之后会出现什么疑问

吗?body的所有子孙元素都会被居中显示。

因此，我们就须要

用再写一条准则，让其中的文本回到默认的居左对齐：

可以想象这条附加的准则将带来一些不便。另外，真实

完全遵循标准的阅读

器并不会改动

容器的位置，而只会让其中的文字居中显示。

3.组合运用

自动外边距和文本对齐