欢迎各位兄弟 发布技术文章
这里的技术是共享的
一般来说,在页面中需要进行水平居中的元素,大致分为两种,一种是块级元素,即display:block,一种是行内元素display:inline-block;
块级元素包括div,ul,p,以及所有的h类标签。行内元素又叫内联元素,a,img,input是最常见的。这些行内元素,可以通过display:block转换成块级元素。
弄明白了哪些是块级元素,哪些是行内元素,我们还要知道其主要区别,两个行内元素可以在一行显示,但是第二个块级元素只能换行显示。
让行内元素水平居中显示,我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的,我们的行内元素就相当于一行之内的文字了,所以可以使用这个方法。
让块级元素,水平居中的办法是为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的,也就可以在是水平方向上居中了。
不管是inline-block还是block,我们需要理解其居中的原理,是inline-block,就对其父级元素添加text-align:center,是块级元素就对其本身添加margin:0 auto;记住了这些,以后再对元素进行居中,居左,居右的时候就不用担心自己不会啦。
今天做项目的时候碰到了不固定元素个数,需要水平居中的问题,原来的确定宽度下margin:0 auto等方法没有用了。想起来之前看过display:inline-block的文章,
果断用这个。
之前很少用这个属性。。印象里麻烦比较多。。好了不多说了,上代码。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>center</title> 6 <style> 7 .content-wrapper{ 8 text-align: center; 9 } 10 11 .content-wrapper ul li{ 12 display: inline-block; 13 border: 1px black solid; 14 } 15 16 17 </style> 18 </head> 19 <body> 20 <div class="content-wrapper"> 21 <ul> 22 <li>hello kitty</li> 23 <li>hello kitty</li> 24 <li>hello kitty</li> 25 </ul> 26 </div> 27 </body> 28 </html>
打开页面,乍一看居中了!!
等等,好像有点奇怪,出现了空白
一般这个奇奇怪怪的空白都是文本节点元素惹的祸。。换行符哟,不信你把li都弄一行里。。
好,解决方法就是在wrapper中定义font-size:0;对于里面需要定义字体大小的元素再挨个手动定义一遍。。。
然后为了兼容ie6/7需要做点hack处理。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>center</title> <style> .content-wrapper{ text-align: center; font-size: 0; } .content-wrapper ul li{ display: inline-block; *display: inline; *zoom:1; border: 1px black solid; font-size: 16px; } </style> </head> <body> <div class="content-wrapper"> <ul> <li>hello kitty</li> <li>hello kitty</li> <li>hello kitty</li> </ul> </div> </body> </html>
好了,完成了!li元素可以用后端代码进行迭代生成了~
在display属性的值中,inline-block具有一些特殊的混合行为.正如他的名字所暗示的,它具有块级元素的特点,也有行内元素的行为.从块级元素角度来说,可以为他设定外边距和内边距,也可以通过它简便而有效的包围其他块级元素.从行内元素角度看,他会收缩包裹自己的内容,而不是扩展填充父元素.换句话说,inline-block元素的宽度始终等于其内容宽度.这种元素还有一个特点,就是可以包围浮动元素.不过,这种元素也有一个问题,既不能给他的外边距设定auto值--而这恰恰又是在更大的容器内居中元素的最简单方法.
解决方案就是为要居中元素的父元素应用text-align:center,为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果:没有宽度的元素也能在其父元素内居中.
来自 http://www.jb51.net/css/225590.html