CSS中水平居中的方法
2018-06-24 02:11:47来源:未知 阅读 ()
居中是我们在css中经常遇到的问题,一般有水平居中、垂直居中、垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记。
- css水平居中
- text-align:center
它的效果为: 将父元素设置了text-align:center之后,子元素中的文本会表现为水平居中;
为了看得更清楚,我们举一个例子,如图,我们将div2放入div1中,现在,如果我们想让文字在div2中水平居中,那么将它的父元素div2或者(div1)设置为text-align:center即可。因为子元素会继承text-align这个属性。
那么接下来,如果我们想让div2也相对于div1水平居中,应该怎么办呢?既然居中效果只对文本内容和行内元素有效,那我们将div2设置为display:inline-block;我们再来看看效果:
我们看到div2与里面的文字都水平居中了,但是我们发现这一段文字水平居中之后很难看,我们只想让div2水平居中,这也就是这种方法的不足之处,子元素的text-align继承了父元素的center,文字也居中显示,所以我们需要在子元素中设置text-align:left;
这样就变正常啦~
2. margin:0 auto;
(1)子绝父相水平居中:因为绝对定位元素具有伸缩性,所以如果我们将绝对定位元素的width设置为auto时,同时把left与right设置为0,那么元素就会将其相对的父元素水平填充满。这时如果我们把宽度设置为固定值,margin为auto的前提下,只要 left 和 right 的值相等(或都为0),且不超过其相对元素减去该绝对定位元素 width 的一半,就可以实现水平居中了。
(2)利用margin负值:将div设置为绝对定位,父元素为相对定位,然后将div的left和top属性值分别设置为50%,但是这个时候只会让div的左上角居中,然后在将margin-left和margin-top属性值分别设置为负数,并且值为div的宽和高的一半,这样就是先了div的中心点居中,但如果它没有父元素,或者父元素中没有采用绝对定位或者相对定位的,那么就以窗口为定位参考对象,也就是整个div相对窗口居中了。
效果看下面两张图,图一中div1设置了相对定位,div2为绝对定位,所以div2在div1中水平居中。
图二中div1设置了无定位,div2为绝对定位,所以div2相对于视窗居中。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash