首页 > 代码库 > *CSS:各种居中总结

*CSS:各种居中总结

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%;

 

*CSS:各种居中总结