|
CSS居中问题一直是大家比较关注的问题,在此前的CSS在线的文章中也曾多次提到过CSS居中的相关话题,今天对CSS居中问题做一个汇总。 CSS居中问题，根据居中对象划分主要包括：DIV居中,图片居中,以及文字居中。而根据居中方向划分为：水平居中和垂直居中。下面让我们来一一详述： CSS 设置水平居中 A.如何设置CSS实现DIV的水平居中 CSS样式 div {margin-left: auto; margin-right: auto; }这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。 代码实例： [CSS在线]-示例代码 这种方式的缺点是：要设定容器的宽度，在比较旧的IE浏览器版本上显示不正常 B.设置TEXT-ALIGN属性实现居中 这种做法是hack，但是因为能兼容大多数浏览器，所以也经常被应用。之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。 body{text-align:center} 因为如此设置会将父容器中所有的子元素的text-align属性全部默认为居中，因此不得不对其中需要居左或居右的元素添加text-align使得画面呈现我们需要的样子。 代码实例： [CSS在线]-示例代码 这种方式的缺点是：子元素的默认属性也变成了居中 C.组合使用自动外边距和文本对齐 为了弥补上面两种方式的缺点,组合使用自动外边距和文本对齐,即在设置了text-align的容器中再嵌套一个容器,将子容器的text-align恢复为正常,并设置子容器的自动外边距。但这仍然不算完美的解决办法 代码实例： [CSS在线]-示例代码 D.负外边距解决方案 负外边距解决方案也是一种通过CSS实现元素居中的办法,但是远不是仅仅为元素添加负外边距这么简单，这种方法需要同时使用绝对定位和负外边距两种技巧。 下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。 然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。 [CSS在线]-示例代码#container{ 代码实例: [CSS在线]-示例代码 CSS 设置垂直居中 A.如何设置CSS实现DIV的垂直居中 设置DIV等容器元素的垂直举重可以通过在CSS中使用expression根据父容器的高度和宽度,来计算确定DIV的margin-left和margin-top位置，从而实现div的垂直居中 代码实例: [CSS在线]-示例代码 虽然这种办法能够实现div的垂直居中,但是仍然是不推荐使用,因为对浏览器资源要求比较高,另外expression只是在IE5.0后才支持。 B.如何设置CSS实现图片的垂直居中 对这个CSS居中问题,我们可以使用设置背景图片的方法,#samplediv{background: url("path") #FFF no-repeat center;}关键就在于这个Center属性，它表示让该背景图片在容器中居中。你也可以把Cener换成Top Left或者直接写上数字来调整它的位置。 代码实例: [CSS在线]-示例代码 C.如何设置CSS实现文字的垂直居中 文字的垂直居中可以用增高行距的办法实现垂直居中，示范代码如下： 代码说明： 代码实例: [CSS在线]-示例代码
|
|
|
