使用justify两端对齐居中布局

原创 heliang090034 随笔 H5 180阅读 2018-01-15 16:17:13 举报

使用justify两端对齐居中布局:
text-align这个属性大家都使用过 常用的有left right center 我们通常使用它来做文本的对齐,这里我们使用text-align:justify来完成。
html:
<ul class="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
css:
.container{
height: 300px;
text-align: justify;
margin:0 25px;
}
.container li{
margin: 10px 0 0;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}

这样就完成了一个居中显示的布局,这种布局有点类似flex的布局模式,但是flex会存在不兼容的地方,浮动布局又不太好控制的时候,选择这种布局方式可以很好的解决。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复