码迷,mamicode.com
首页 > Web开发 > 详细

*CSS:各种居中总结

时间:2017-04-22 20:43:06      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:水平居中   com   样式   src   水平   布局   inline   多个   使用   

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:各种居中总结

标签:水平居中   com   样式   src   水平   布局   inline   多个   使用   

原文地址:http://www.cnblogs.com/jacksplwxy/p/6749002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!