*CSS:各种居中总结

Posted 2020-09-13

1.文字和图片的居中：
答：在父元素定义属性text-algin:center;此属性试用与所有行内元素居中！

2.如何实现截图所示多个块的居中？

答：如上，在网站布局中，很多时候，子元素中使用行内元素如 span或块元素li标签且标签个数不定，而我们又想让这一块不管个数有多少个(子元素的总体宽度不定)，始终都能居中显示。这就需要设置子元素 display:inline-block。同时，根据display:inline-block的属性，子元素本身具备inline的特性，因此父元素 需要设置text-align：center，来实现子元素作为一个整体在父元素中水平居中。

3.块级元素如何居中：
答：设置块级元素属性：margin:0 auto;

4.浮动元素如何居中？
答：父元素样式：float:left;position:relative;left:50%;
子元素样式：float:left;position:relative;left:-50%;