zoukankan      html  css  js  c++  java
  • css水平居中

    在知道父容器的宽度的时候我们可以根据margin:0 auto;来进行水平居中

    在父容器宽度不知道的情况下:那么光是margin:0 auto是不管用的  

    那么我们可以设置 display:table;margin:0 auto;并且父容器需要overflow:hidden;来进行水平居中     (表格具有关联收缩、垂直居中等特性)

    但是设置了display:table;后他们的宽度和高度会会失效  (ie*-无效)

    第二种办法:外层使用text-align:center;我们知道text-align:center是让里面的内联元素居中,很显然在外层设置text-align:center后,我们让里面的元素变成内联元素即可,则可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)
    总结:
    外层元素{text-align:center;}
    内层元素div{display:inline-block;text-align:left;}

    还有一种:不推荐

    外层设置相对定位且浮动,left:50%,这样左边位置就偏移到了中间的位置;然后内层设置相对定位,left:-50%,这样正好向左偏移自身宽度的一半,实现了居中。

    <div class="wrap">
      <div class="inner">html:让inner居中</div>
    </div>
    .wrap{float:left;/*自适应内容宽度*/position:relative;left:50%;}
    .inner{position:relative;left:-50%;}
  • 相关阅读:
    #与javascript:void(0)的区别
    单选框、复选框、下拉列表
    数据类型后的“?”
    c#中日期的处理
    日期控件html
    javascript获取后台传来的json
    Hashtable语法简介
    Hashtable(哈希表)
    Dictionary 字典
    远程SQL Server连接不上
  • 原文地址:https://www.cnblogs.com/lichihua/p/8989958.html
Copyright © 2011-2022 走看看