06/10
2016
如图,下面有三个小图,这三个小图使用的是标签li,父元素是ul,如下:
现在的问题是底下小图的数量不固定,那么如何使它们始终居中呢?
对于行内内部元素的居中,可以在父元素上使用
text-align: center;
这里面一个关键的地方在于,子元素得是行内元素。li是块状元素,所以这个属性就没有生效。把li改成类似于行内元素就行了:
display: inline-block;
这样不管有多少个li,都可以居中了。这样设置也是代替浮动的一个好办法。
需要注意的是,display设置为inline-block的元素之间不要有空格或断行,否则在页面上显示时中间会有空隙。