今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下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. OpenStack源码系列---nova-api

    OpenStack源码实际上是比较规范的,但是对刚刚接触到源代码的人来说,却感觉有点混乱.我刚开始的时候也常常搞乱,比如service.Service类继承自openstack.common.serv ...

  2. vs2010 msvcr100.DLL 丢失！！！ 用release 就可以了

  3. Hibernate Jar包官方下载

    1.新手入门,从官网下载Hibernate,选择 Hibernate ORM 2.选择Releases-Overview 3.上面列出的是最新版本,下面有一个see older series 直接下载 ...

  4. HDU 6078 Wavel Sequence 树状数组优化DP

    Wavel Sequence Problem Description Have you ever seen the wave? It's a wonderful view of nature. Lit ...

  5. JAVA中Stack和Heap的区别

    http://m.blog.csdn.net/wl_ldy/article/details/5935528

  6. C++11 条件变量

    C++11中的条件变量提供了用户等待的同步机制,在同步队列的应用中有很大的便利. 简单同步队列代码如下(SimpleSyncQueue.h): #ifndef SIMPLESYNCQUEUE_H #d ...

  7. map数据的分组，list数据排序 数据筛选

    sfit0144 (李四) 2015-01-10 18:00:251Sfit0734 (Sfit0734) 2015-01-10 18:00:38go homesfit0144 (李四) 2015-0 ...

  8. 跳转到AppStore 的不同位置办法

    程序跳转到appstore中指定的应用 1.进入appstore中指定的应用NSString *str = [NSString stringWithFormat:                    ...

  9. IDEA下搭建简单的SpringBoot工程应用

    (1)File->new,选择maven,创建一个空项目,直接next. (2)填写工程名,next. (3)填写项目名,next,创建一个基于maven的空Java项目. (4)在pom文件中 ...

  10. 花式GCD

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...