|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
结构清晰,容易被搜索引擎搜索到,天生优化了seo
破洛洛文章简介:用CSS让元素居中显现并非件很复杂的事变―一样的正当CSS居中设置在分歧扫瞄器中的体现举动却半斤八两。让我们先来看一下CSS中罕见的几种让元素程度居中显现的办法。
用CSS让元素居中显现并非件很复杂的事变—一样的正当CSS居中设置在分歧扫瞄器中的体现举动却半斤八两。让我们先来看一下CSS中罕见的几种让元素程度居中显现的办法。
1.利用主动外边距完成居中
CSS中首选的让元素程度居中的办法就是利用margin属性—将元素的margin-left和margin-right属性设置为auto便可。在实践利用中,我们能够为这些必要居中的元素创立一个起容器感化的div。必要出格注重的一点就是,必需为该容器指定宽度:
div#container{
margin-left:auto;
margin-right:auto;
width:168px;
}
在年夜多半支流扫瞄器中,这类办法都十分无效,即便是Windows平台上的IE6,在其尺度兼容形式(compliancemode)下也可以一般显现。但不幸的是,在更低版本的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:1pxsolidred;
width:168px;
text-align:left
}
但是这一直是个hack,不管怎样也算不上完善。我们仍是必要为居中容器中的文本编写附加的划定规矩,但最少在各个扫瞄器中看起来都不错。
4.负外边距办理计划
负外边距办理计划远不是仅仅为元素增加负外边距这么复杂。这类办法必要同时利用相对定位和负外边距两种技能。
上面是该计划的详细完成办法。起首,创立一个包括居中元素的容器,然后将其相对定位于绝对页面右边边沿50%的地位。如许,该容器的左外边距将从页面50%宽度的地位入手下手算起。
然后,将容器的左外边距值设置为负的容器宽度的一半。如许便可将该容器流动在页面程度偏向的中点。
#container{
background:#ffcurl(mid.jpg)repeat-ycenter;
position:absolute;
left:50%;
width:760px;
margin-left:-380px;
}
看,没有任何hack!固然这并非首选的办理计划,但也是个不错的办法,且合用性极广—乃至在NetscapeNavigator4.x中都没有任何成绩,很使人受惊,不是吗?以是若想失掉最普遍的扫瞄器撑持,那末这类办法将会是最好的选择。
更好的控制页面布局。不用多说。 |
|