您好,登录后才能下订单哦!
这篇文章主要讲解了“css如何设置页面居中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何设置页面居中”吧!
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
居中在CSS中用的也比较常见,总结几种自己比较熟悉的居中的写法。当然,肯定还有更多更不错的写法,对于文中不足的地方也欢迎指正。
假设现在给出这种场景:
<p class="parent"> <p class="child"> DEMO </p> </p>
其中在class='child'
这个div中的内容长度是不一定的,现在需要实现这个div
的居中。
1.1text-align: center
在块级父容器中让行内元素或者类行内元素居中,只需使用text-align: center
,
这种方法可以让inline/inline-block/inline-table/inline/flex
居中。
.child { display:inline-block; /*子元素文字会继承居中,因此要在上面写上向左边居中*/ text-align:left; } .parent { text-align:center; }
当有多个child div
的时候如果设置display: inline-block
的时候需要注意每个div之间会有缝隙,这不是什么bug
,特性就是如此。
如果想去掉这些缝隙的话,有几种解决方法:
1、去掉HTML中的空格。
元素之间留白间距出现的原因是因为标签段之间的空隙,这个时候只需要去除掉HTML
之间的空隙就好了。
比如这种写法,当然写法也有很多种,只要保证把空隙去掉就可以了,但是这种方法总觉得写起来有点反人类。
<p class="parent"> <p class="child"> DEMO1</p ><p class="child"> DEMO2</p ><p class="child"> DEMO3</p> </p>
2、使用margin负值
这种方法这个负的值不太好确定,和上下文的字体等等都有关,这种方法不太适合大规模的使用。
.child { margin-right; -5px; }
3、使用 font-size: 0
这种方法能十分简单地这个间距问题,只需要将父div
的font-size
设为0
,然后记得将子div
的font-size
属性设置回来即可。
.parent { font-size: 0; } .chilc { font-size: 16px; }
4、使用letter-spacing或者word-spacing
.parent { letter-spacing: -5px; /*或者*/ word-spacing: -5px; } .chilc { letter-spacing: 0; /*或者*/ word-spacing: 0; }
1.2 dispaly: flex
只兼容IE10+
.parent { display:flex; justify-content:center; } /*或者*/ .child{ margin:0 auto; }
1.1display: table-cell
可以使高度不同的元素都垂直居中
.parent { display:table-cell; vertical-align:middle; }
2.2 position: absolute
.parent { position:relative; } .child{ position:absolute; top:50%; /* 参照物是父容器 */ transform:translateY(-50%); /*百分比的参照物是自身 */
感谢各位的阅读,以上就是“css如何设置页面居中”的内容了,经过本文的学习后,相信大家对css如何设置页面居中这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。