当前位置: 秋叶网络博客 前端编程 ◊ 让宽度变化的元素水平居中显示

让宽度变化的元素水平居中显示

作者:秋了秋 发表时间:2015年07月08日

让一个元素水平居中常用的方法是给需要居中的元素块设置固定宽度以及margin:0 auto属性,如已知一个元素的宽度(定死了的,后期不会再变化),那么如下代码即可轻松让其居中:

<div class="wuover">
<div class="qiuqiu">我是秋叶!</div>
</div>
<style>
.qiuqiu{width:80px;margin:0 auto;}
</style>

但是如果碰到了qiuqiu这个div里面的内容会变化的情况下,自然qiuqiu就不能设置宽度,否则超出的文字不能显示,或者你也可以设置qiuqiu的宽度为一个较大的值,但是这样当qiuqiu里面的内容较少的时候,内容还是不居中。解决的办法就是不要设置宽度,直接在qiuqiu的css属性里面加上display:table;如:

<style>
.qiuqiu{display:table;margin:0 auto;}
</style>

这虽然是一个很小很小的技巧,但是它的用处却是非常大的,很多地方都需要用到。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/363.html
目录: 前端编程 | 标签: div层居中 | 13185次阅读