[分享]css两端居中对齐

CSS中的对齐是网页设计中一个非常重要的因素，对于网页布局和界面美观度具有很大的影响。在网页中，我们可能会遇到一些需要两端对齐的场景，比如导航栏的菜单、列表、图片等等。本文将介绍一种实现两端居中对齐的...

CSS中的对齐是网页设计中一个非常重要的因素，对于网页布局和界面美观度具有很大的影响。在网页中，我们可能会遇到一些需要两端对齐的场景，比如导航栏的菜单、列表、图片等等。本文将介绍一种实现两端居中对齐的CSS方法。

一般情况下我们使用 text-align:center; 来实现居中对齐，但是这种情况下并不能实现两端对齐。在CSS中，有一种特殊的属性叫做 text-justify ，它可以很好地实现两端对齐。

selector {
    text-align:justify;
    text-justify:distribute-all-lines;
} 

以上是实现两端居中对齐的CSS代码。其中，text-align:justify; 表示采用两端对齐的方式对齐元素内容，而 text-justify:distribute-all-lines; 表示采用分布所有行的方式进行对齐，即将元素内容平均分配到元素宽度中去。通过这些属性的组合，我们就可以实现两端居中对齐的效果。

这种对齐方式不仅可以用于文本，还可以用于一些块级元素，比如图片、列表等等。不过需要注意的是， text-justify 属性并不是所有浏览器都支持，一些旧版的浏览器可能会出现兼容性问题，需要进行适当的兼容性处理。

综上所述，实现两端居中对齐的CSS方法非常简单，使用 text-align:justify; 和 text-justify:distribute-all-lines; 这两个属性即可实现。在布局网页过程中，我们可以根据需要选择不同的对齐方式来满足需求。