今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下margin:0 auto等方法木有用了。想起来之前看过display：inline-block的文章，

果断用这个。

之前很少用这个属性。。印象里麻烦比较多。。好了不多说了，上代码。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>center</title>

     <style>

         .content-wrapper{

             text-align: center;

         }

         .content-wrapper ul li{

             display: inline-block;

             border: 1px black solid;

         }

     </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都弄一行里。。

好，解决方法就是在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元素可以用后端代码进行迭代生成了~

inline-block元素水平居中问题的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  3. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  4. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  5. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  6. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  7. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  8. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  9. css点滴2—六种方式实现元素水平居中

    本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...

  10. 【css系列】六种实现元素水平居中方法

    一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...

随机推荐

  1. linux下提示command not found

    首先就要考虑root 的$PATH里是否已经包含了这些环境变量. 主要是这四个:/bin ,/usr/bin,/sbin,/usr/sbin. 四个主要存放的东东: ./bin: bin为binary ...

  2. 基于ADB框架Robotium跨进程操作

    转自:http://blog.csdn.net/qingchunjun/article/details/42580937 2015年2月3日更新: 有些朋友在用真机尝试本方法时,抛出了InputStr ...

  3. 基于redis集群实现的分布式锁，可用于秒杀商品的库存数量管理，有測试代码(何志雄)

    转载请标明出处. 在分布式系统中,常常会出现须要竞争同一资源的情况,本代码基于redis3.0.1+jedis2.7.1实现了分布式锁. redis集群的搭建,请见我的另外一篇文章:<>& ...

  4. Mac中配置eclipse的php开发环境

    1.mac中自带php和apache,不过版本不是最新的. 2.打开apache配置文件中php相关设置,并设置php的工程目录为你想要的目录 3.复制php.ini.default为php.ini, ...

  5. SequenceFile

    org.apache.hadoop.io包里的SequenceFile类提供了高效的二进制文件格式,它经常用于MapReduce作业的输出.尤其是当作业的输出被当做另一个作业的输入时.Sequence ...

  6. 微信公众号菜单与应用交互session

    http://www.cnblogs.com/yank/p/3476874.html http://blog.csdn.net/zmhawk/article/details/43671195 http ...

  7. vfork函数的使用【学习笔记】

    #include "apue.h" ; int main(void) { int var; pid_t pid; ; printf("before vfork\r\n&q ...

  8. nodejs api 中文文档

    文档首页 英文版文档 本作品采用知识共享署名-非商业性使用 3.0 未本地化版本许可协议进行许可. Node.js v0.10.18 手册 & 文档 索引 | 在单一页面中浏览 | JSON格 ...

  9. java socket 以及 流 关闭的问题

    首先我一下几个提出问题:稍后再做出解答. 问题一:A如果仅仅将输入流关闭(inA.close()),对A与B之间的连接是否有影响? A能否再次获得输入流(inA = socketA.getInputS ...

  10. codeforces 696A A. Lorenzo Von Matterhorn(水题)

    题目链接: A. Lorenzo Von Matterhorn time limit per test 1 second memory limit per test 256 megabytes inp ...