网站建设

当前位置:首页 > 新闻 > 网站建设

网站制作CSS中水平居中的方法

2018年01月18日查阅次数:

居中是我们在css中经常遇到的问题,一般有水平居中、垂直居中、垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记。


css水平居中

1.text-align:center

它的效果为: 将父元素设置了text-align:center之后,子元素中的文本会表现为水平居中;


为了看得更清楚,我们举一个例子,如图,我们将div2放入div1中,现在,如果我们想让文字在div2中水平居中,那么将它的父元素div2或者(div1)设置为text-align:center即可。因为子元素会继承text-align这个属性。

css水平居中.png

css水平居中.png

那么接下来,如果我们想让div2也相对于div1水平居中,应该怎么办呢?既然居中效果只对文本内容和行内元素有效,那我们将div2设置为display:inline-block;我们再来看看效果:

css水平居中.png

我们看到div2与里面的文字都水平居中了,但是我们发现这一段文字水平居中之后很难看,我们只想让div2水平居中,这也就是这种方法的不足之处,子元素的text-align继承了父元素的center,文字也居中显示,所以我们需要在子元素中设置text-align:left;

css水平居中.png

这样就变正常啦~


2. margin:0 auto;

margin: 0 auto;在本身元素上设置,可以实现块级元素水平居中。上面的例子中我们可以看到div1并没有相对页面水平居中,它是块级元素,所以我们只要把div1,div2都设置margin:0 auto;就会出现如下效果:

css水平居中.jpg

3. 利用绝对定位元素实现

(1)子绝父相水平居中:因为绝对定位元素具有伸缩性,所以如果我们将绝对定位元素的width设置为auto时,同时把left与right设置为0,那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值,margin为auto的前提下,只要 left 和 right 的值相等(或都为0),且不超过其相对元素减去该绝对定位元素 width 的一半,就可以实现水平居中了。

css水平居中.gif

(2)利用margin负值:将div设置为绝对定位,父元素为相对定位,然后将div的left和top属性值分别设置为50%,但是这个时候只会让div的左上角居中,然后在将margin-left和margin-top属性值分别设置为负数,并且值为div的宽和高的一半,这样就是先了div的中心点居中,但如果它没有父元素,或者父元素中没有采用绝对定位或者相对定位的,那么就以窗口为定位参考对象,也就是整个div相对窗口居中了。


效果看下面两张图,图一中div1设置了相对定位,div2为绝对定位,所以div2在div1中水平居中。


图二中div1设置了无定位,div2为绝对定位,所以div2相对于视窗居中。

css水平居中.png

css水平居中.png


松一设计(http://www.songyi.net)提供上海网站建设、一站式网站制作解决方案。




下一篇:上海南翔网站建设公司
上一篇:上海网页设计新趋势

每个成功网站设计的项目,从第一通电话开始

交流项目,沟通创意,我们是上海松一

Close