<b>CSS 让元素水平居中的显示办法</b>[网站美工]
本文“<b>CSS 让元素水平居中的显示办法</b>[网站美工]”是由七道奇为您精心收集，来源于网络转载，文章版权归文章作者所有，本站不对其观点以及内容做任何评价，请读者自行判断，以下是其具体内容：
用CSS让元素居中显示并非件很简单的事情—一样的合理CSS居中设置在差别浏览器中的表现行为却各有所长.让我们先来看一下CSS中常见的几种让元素水平居中显示的办法.
1.利用自动外边距实现居中
CSS中首选的让元素水平居中的办法就是利用margin属性—将元素的margin-left和margin-right属性设置为auto便可.在实际利用中,我们可认为这些需求居中的元素成立一个起容器作用的div.需求分外注意的一点就是,必须为该容器指定宽度:
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}
在大大都主流浏览器中,这种办法都非常有效,即便是Windows平台上的IE6,在其尺度兼容情势（compliance mode）下也可以正常显示.但不幸的是,在更低版本的IE中,这种设置却并不能实现居中效果.所以若想在实际项目中利用这种办法,那么就要确保用户的IE浏览器版本不低于6.0.
固然在支持上不尽如人意,但大大都计划师都倡议尽大概地利用这种办法.该办法也被认为是在各种用CSS实现元素水平居中办法中最精确、最公道的一种.
2.利用text-align实现居中
另一种实现元素居中的办法是利用text-align属性,将该属性值设置为center并利用到body元素上便可.这种做法是彻彻底底的hack,但它却能兼容大大都浏览器,所以在某些情形下也自然必不可少.
之所以说它是hack,是因为这种办法并没有将文本属性利用到文本上,而是利用到了作为容器的元素上.这也给我们带来了额外的工作.在成立好筹划必须的div之后,我们要按照以下代码为body利用text-align属性:
body{
text-align:center;
}
之后会呈现什么问题吗?body的全部子孙元素城市被居中显示.
因此,我们就需求用再写一条法则,让此中的文本回到默许的居左对齐:
p {
text-align:left;
}
可以想象这条附加的法则将带来一些不便.别的,真正完好遵守尺度的浏览器并不会改变容器的位置,而只会让此中的文字居中显示.
3.组合利用自动外边距和文本对齐
因为文本对齐居中方法有着杰出的向下兼容性,且自动外边距方法也被大大都现代浏览器支持,所以很多计划师将二者组合起来利用,以期让居中效果得到最大限度的跨浏览器支持:
body {
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 168px;
text-align: left
}
但是这始终是个hack,无论若何也算不上完善.我们还是需求为居中容器中的文本编写附加的法则,但至少在各个浏览器中看起来都不错.
4.负外边距办理筹划
负外边距办理筹划远不是仅仅为元素增添负外边距这么简单.这种办法需求同时利用绝对定位和负外边距两种本领.
下面是该筹划的具体实现办法.首先,成立一个包含居中元素的容器,然后将其绝对定位于相对页面左边边沿50%的位置.这样,该容器的左外边距将从页面50%宽度的位置开始算起.
然后,将容器的左外边距值设置为负的容器宽度的一半.这样便可将该容器固定在页面水平方向的中点.
#container {
background: #ffc url(mid.jpg) repeat-y center;
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px;
}
看,没有任何hack!固然这并非首选的办理筹划,但也是个不错的办法,且实用性极广—乃至在Netscape Navigator 4.x中都没有任何问题,很令人吃惊,不是吗?所以若想得到最遍及的浏览器支持,那么这种办法将会是最好的挑选.
以上是“<b>CSS 让元素水平居中的显示办法</b>[网站美工]”的内容，如果你对以上该文章内容感兴趣，你可以看看七道奇为您推荐以下文章：
| 本文地址： | 与您的QQ/BBS好友分享! |
- 好的评价 如果您觉得此文章好，就请您
0%(0) 
- 差的评价 如果您觉得此文章差，就请您
0%(0) 
中查找“<b>CSS 让元素水平居中的显示办法</b>”更多相关内容
中查找“<b>CSS 让元素水平居中的显示办法</b>”更多相关内容