今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下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. android经常使用正则工具类

    此类提供日常开发中经常使用的正则验证函数.比方:邮箱.手机号.电话号码.身份证号码.日期.数字.小数.URL.IP地址等.使用Pattern对象的matches方法进行整个字符匹配,调用该方法相当于: ...

  2. 作为iOS程序员，最核心的60%能力有哪些？

    作为iOS程序员,最核心的60%能力有哪些?   一个合格的iOS程序员需要掌握多少核心技能?你和专业的开发工程师的差距有多大?你现在的水平能开发一个功能完整性能高效的iOS APP吗?一起来看看下面 ...

  3. 使网页适应UIWebView的宽度

    比較简单的做法是:在- (void)webViewDidFinishLoad:这种方法中,改动JavaScript的值: //UIWebViewDelegate - (void)webViewDidF ...

  4. notpad++快捷键

    Notpad++快捷键 Notepad++选中行操作 快捷键 使用技巧 作者: Rememberautumn 分类: 其他 发布时间: 2014-09-04 14:18 阅读: 60,106  微信小 ...

  5. java 调用ant的自己定义task，默认不是build.xml 的一点问题

    java  调用ant的自己定义task, File buildFile = new File(".//ee-build.xml");         // 创建一个ANT项目   ...

  6. MVC Controller构造器注入

    UnityDependencyResolver 的标准写法 public class UnityDependencyResolver : IDependencyResolver {     priva ...

  7. XHTML中button加入超链接以及使插入图片与屏幕一样大

    1.button加入超链接 (1)假设是在本页跳转到新页面.用 <span style="font-size:18px;"><input type="b ...

  8. PPAPI与Browser间使用AsyncIPC通信

    採用AsyncIpc这个项目(https://github.com/hicdre/AsyncIpc).来完毕PPAPI Plugin进程与Browser进程的通信. foruok原创.如需转载请关注f ...

  9. Handler有何作用？怎样使用？

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012974916/article/details/24580405 一  Handler作用和概念 ...

  10. jquery.validate ajax验证

    $("#form1").validate({ rules: { ctl00$ContentPlaceHolder1$txtShopName: { remote: { type: & ...