CSS:水平对齐分区,而不浮 [英] CSS: Horizontally align div without float
本文介绍了CSS:水平对齐分区,而不浮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否存在一个的优雅的方式,水平对齐3 的div
而不使用的 浮动
CSS属性。
I want to know if there exists an elegant way to horizontally align 3 divs
without using float
css property.
HTML:
<div id="parent">
<div id="first">Left</div>
<div id="second">Middle</div>
<div id="third">Right</div>
</div>
我问这个问题,因为父 DIV
也没有浮动
属性和添加浮法
来的小孩会在页面大小调整问题。
I ask this question because the parent div
has not float
property and adding float
to children cause problems on page resizing.
推荐答案
您可以使用显示:inline-block的
或显示:表细胞
的内部内容。
You can use display:inline-block
or display:table-cell
with the inner content.
表的布局:的
Table layout:
#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }
inline-block的布局:的
Inline-block layout :
#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }
这篇关于CSS:水平对齐分区,而不浮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文