美文网首页
无固定宽度 元素 居中

无固定宽度 元素 居中

作者: 冯走心 | 来源:发表于2016-09-23 15:37 被阅读64次

    在不设置 Div 元素的宽度(width)的情况下,如何让 Div 元素居中
    最后一种方法,也是最近做响应式web开发时遇到的问题,在不设置宽的的情况下怎么让div居中就是一个问题,下面我就讲一下怎么让不设置宽度的div居中的方法

    
    <div class=
    "wrap"
    >
    
          
    <div class=
    "inner"
    >让这个div居中</div>
    
    </div>
    
    .wrap {
    
          
    float
    : 
    left
    ; 
    /* 自适应内容宽度 */
    
          
    position
    : 
    relative
    ;
    
          
    left
    : 
    50%
    ; }.inner {
    
          
    position
    : 
    relative
    ;
    
          
    left
    : 
    -50%
    ; 
    
    }
    

    .wrap 使用 float 是为了让 .wrap 的宽度等于 .inner 的宽度让 .wrap 的左边在父层的中线上, 让.inner 的左边相对 .wrap 向左移动一半, 这样就可以实现 .inner 在.wrap 的父层的中间。

    相关文章

      网友评论

          本文标题:无固定宽度 元素 居中

          本文链接:https://www.haomeiwen.com/subject/qkbtyttx.html