zoukankan      html  css  js  c++  java
  • css居中方式总结

    方法一: line-height

    <div class="vertical" style="200px;height:200px;border:2px solid #999">居中显示</div>
    
    .vertical {
      line-height:200px;//这里将跟height一样        
    }
    

      

    方法二:position定位方式

     给容器设置绝对定位(position:absolute),并且定位高度(top:50%)和margin-top为高度的一半(margin-top:-height/2)

    <div class="vertical">居中显示</div>
    
    .vertical {
    height: 100px; position: absolute; top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/ margin-top: -50px;/*设置元素顶边负边距,大小为元素高度的一半*/ }

    方法三:让div模拟表格效果

    <div id="container"> 
    <div id="content">content</div> 
    </div> 
    
    #container { 
    height: 300px; 
    display: table;/*让元素以表格形式渲染*/ 
    } 
    #content { 
    display:table-cell;/*让元素以表格的单元素格形式渲染*/ 
    vertical-align: middle;/*使用元素的垂直对齐*/ 
    } 
    

      

    方法四: 给出上下一样的padding值 

    <div class="columns"> 
    <div class="item">test</div> 
    </div> 
    
    .item {padding-top:30px;padding-bottom:30px;} 
    

      

    方法五:margin: 0 auto实现水平居中

    满足两个条件:其一,元素需要有一个固定宽度值;其二元素的margin-left和margin-right都必须设置为auto,这两个条件少了任何一个都无法让元素达到水平居中的效果

    <div class="horizontal">content</div>
    
    .horizontal { 
     200px; 
    margin: 0 auto; 
    }  
    

     想要使用这种类似的方式实现垂直居中是不行的,只能用于水平居中

    方法六: 使用绝对定位配合负的margin实现水平居中

    <div class="horizontal">content</div> 
    
    .horizontal { 
     960px; 
    position: absolute; 
    left: 50%; 
    margin-left: -480px;/*此值等于“-width/2”*/ 
    } 
    
  • 相关阅读:
    排序算法之希尔排序
    排序算法之直接插入排序
    PL/SQL之异常
    PL/SQL之包
    PL/SQL之存储过程和函数
    Oracle左连接、右连接、全外连接以及(+)号用法
    PL/SQL之存储过程和触发器实例
    PL/SQL之游标的使用
    Tag Tree
    目录:JAVA
  • 原文地址:https://www.cnblogs.com/elexiang/p/4803046.html
Copyright © 2011-2022 走看看