今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下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. Go语言测试代码

    第一次学go语言,测试代码 package main import "fmt" var age int; const sex = 0 func init() { fmt.Print ...

  2. [Pyhton]weakref 弱引用

    文档中的解释: https://docs.python.org/2/library/weakref.html wiki 中的解释: 在计算机程序设计中,弱引用.与强引用相对.是指不能确保其引用的对象不 ...

  3. C++ 四种强制类型转变与区别之处

    使用标准C++的类型转换符:static_cast.dynamic_cast.reinterpret_cast和const_cast.1.static_cast    用法:static_cast&l ...

  4. UI UISearchBar UISearchDisplayController实现搜索条、解析颜色

    本文转载至 http://blog.sina.com.cn/s/blog_bf2d33bd01017q6l.html @interface ThirdViewController : UIViewCo ...

  5. 文件管理中心iOS版简介

    App Store地址:https://itunes.apple.com/cn/app/id1023365565?mt=8 文件管理中心-装机必备的文件管家,专业的rar-zip 解压工具,局域网看片 ...

  6. Bootstrap progress-bar

    1.进度条 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等.就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版 ...

  7. python 1: 解决linux系统下python中的matplotlib模块内的pyplot输出图片不能显示中文的问题

    问题: 我在ubuntu14.04下用python中的matplotlib模块内的pyplot输出图片不能显示中文,怎么解决呢? 解决: 1.指定默认编码为UTF-8: 在python代码开头加入如下 ...

  8. Java IO、BIO、NIO、BIO

    一.什么是IO/NIO: IO:即BIO(Blocking IO):面向流的.同步阻塞式IO:(JDK1.4之前唯一的选择) NIO:面向缓冲的.同步非阻塞式IO:三大核心部分:Selector.Ch ...

  9. bzoj3090: Coci2009 [podjela]

    这个范围明显树包的 然而值并不滋磁 想了一会发现可以带一维当前子树用了多少边,搞定当前向上还能送多少 然后发现会有搞不定的情况,要向上传负数 每次都要重新初始化,负数强制要要 #include< ...

  10. POJ1094 Sorting It All Out —— 拓扑排序

    题目链接:http://poj.org/problem?id=1094 Sorting It All Out Time Limit: 1000MS   Memory Limit: 10000K Tot ...