欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

inline-block元素水平居中问题 inline-block和block元素水平居中显示

用的方法,却总也无法让元素水平居中,这时就需要我们对需要居中的元素进行分类总结,然后对症下药。

方法/步骤

 
  1. 1

    一般来说,在页面中需要进行水平居中的元素,大致分为两种,一种是块级元素,即display:block,一种是行内元素display:inline-block;

    inline-block和block元素水平居中显示
  2. 2

    块级元素包括div,ul,p,以及所有的h类标签。行内元素又叫内联元素,a,img,input是最常见的。这些行内元素,可以通过display:block转换成块级元素。

    inline-block和block元素水平居中显示
  3. 3

    弄明白了哪些是块级元素,哪些是行内元素,我们还要知道其主要区别,两个行内元素可以在一行显示,但是第二个块级元素只能换行显示。

    inline-block和block元素水平居中显示
  4. 4

    让行内元素水平居中显示,我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的,我们的行内元素就相当于一行之内的文字了,所以可以使用这个方法。

    inline-block和block元素水平居中显示
  5. 5

    让块级元素,水平居中的办法是为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的,也就可以在是水平方向上居中了。

    inline-block和block元素水平居中显示
  6. 6

    不管是inline-block还是block,我们需要理解其居中的原理,是inline-block,就对其父级元素添加text-align:center,是块级元素就对其本身添加margin:0 auto;记住了这些,以后再对元素进行居中,居左,居右的时候就不用担心自己不会啦。

    inline-block和block元素水平居中显示
    END

注意事项

 
  • 小渔个人总结,欢迎点赞交流技术问题。

    来自  http://jingyan.baidu.com/article/e2284b2b67b5f1e2e6118d22.html



    inline-block元素水平居中问题

     

    今天做项目的时候碰到了不固定元素个数,需要水平居中的问题,原来的确定宽度下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元素可以用后端代码进行迭代生成了~

来自  http://www.cnblogs.com/hongchenok/p/3913377.html


使用display:inline-block居中没有宽度的元素

作者:佚名 字体:[增加 减小] 来源:互联网 时间:09-29 16:45:20 我要评论

为要居中元素的父元素应用text-align:center,为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果
在一个元素内居中另一个元素有时候会很困难.对于常规,静态定位的元素,可以让他向左或向右浮动,或者使用text-align属性让他在父元素内居左,居中或居右.还可以利用自动外边距(margin:0 auto;)来居中元素.这些方法的问题在于,要居中的元素必须是有宽度的.像这里用于构成菜单的html列表,他可能是根据数据库信息动态生成的,或者说将来有可能手工编辑,总之你不可能提前设定他的宽度. 


在display属性的值中,inline-block具有一些特殊的混合行为.正如他的名字所暗示的,它具有块级元素的特点,也有行内元素的行为.从块级元素角度来说,可以为他设定外边距和内边距,也可以通过它简便而有效的包围其他块级元素.从行内元素角度看,他会收缩包裹自己的内容,而不是扩展填充父元素.换句话说,inline-block元素的宽度始终等于其内容宽度.这种元素还有一个特点,就是可以包围浮动元素.不过,这种元素也有一个问题,既不能给他的外边距设定auto值--而这恰恰又是在更大的容器内居中元素的最简单方法. 

解决方案就是为要居中元素的父元素应用text-align:center,为要居中的元素设定display:inline-block.这样设定就可以得到我们想要的结果:没有宽度的元素也能在其父元素内居中.

来自  http://www.jb51.net/css/225590.html


普通分类: