精华内容
下载资源
问答
  • 在某些特定的场合,在没有知道宽度的情况下却要求水平居中,前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法,并选了一个最合适的方法,现将当时整理的一些方法发出。下列以分页作为演示说明: ...
        

    在某些特定的场合,在没有知道宽度的情况下却要求水平居中,前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法,并选了一个最合适的方法,现将当时整理的一些方法发出。下列以分页作为演示说明:

    点击查看演示DEMO

    方案一

    利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动”

    .unknow_width_center1 {position:relative; left:50%; float:left;}
    .unknow_width_center1 li {position:relative;  right:50%; z-index:2; float:left}</pre>
    <ul class="unknow_width_center1">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
    </ul>
    

    通过给父元素设置浮动float,再设置父元素的position属性为relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中。

    可以保留块级元素仍然是以display:block的形式显示,不会添加无意义的标签,不添加嵌套深度。缺点是设置了position:relative;带来了一些副作用,并且需要闭合(清除)浮动。

    方案二

    利用text-align属性特性(text-align:center 对于ie6、7块级和内联级都可以水平居中。其它浏览器内联级(内联块级,文字)元素才可以水平居中,块级无效。 )强制定义为内联 display:inline

    .unknow_width_center2 {text-align:center; padding:5px;}
    .unknow_width_center2 li {display:inline;}</pre>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
    </ul>
    

    将子元素设置为内联居中,那么大家都知道的display:inline内联元素宽高是不可以设定的,局限性太大,不宜使用。

    方案三

    利用table的属性特性

    .unknow_width_center3{margin:0 auto}
    .unknow_width_center3 ul {overflow:hidden; *zoom:1}
    .unknow_width_center3 ul li {float:left;}</pre>
    <table class="unknow_width_center3">
    <tbody>
    <tr>
    <td>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
    </ul>
    </td>
    </tr>
    </tbody>
    </table>
    

    是使用table作为容器的方法来实现。添加了无意义的标签。Table标签本身并不是块级元素,当我们不设置table的宽度的话,他里面的宽度是由他内部元素的宽度撑起来的。但即使我们没有设置table的宽度,直接设置table的外边距margin:0 auto;就可以实现水平居中了!这样我们就可以通过设置table水平居中,间接使里面的内容居中。

    方案四

    利用内联块display:inline-block的text-align属性

    .unknow_width_center4 {text-align:center}
    .unknow_width_center4 ul li {display:inline-block; *display:inline; *zoom:1;}</pre>
    <ul class="unknow_width_center4 ">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
    

    IE6/7下直接设置display:inline-block的居中无效,这里在IE6/7下设置了display:inline,神奇的是竟然可以设置宽高及其垂直方向的内外边距。缺点是display:inline-block会引起一些间隙,当然有看起来碍眼解决方案。

    方案五

    利用table table-cell

    .unknow_width_center5 ul{  display:table; margin:0 auto; }
    .unknow_width_center5 li{display:table-cell;}</pre>
    <ul class="unknow_width_center5 ">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
    </ul>
    

    ie6/ie7不支持table-cell属性,所以该方法也不适用ie6/ie7,如果需要兼容在这基础上加东西也很蛋疼。

    点击查看演示DEMO
    个人偏向使用方法一”相对浮动”,适用广泛代码简洁且不会出现什么问题,可惜就是每次使用的时候要考虑浮动的处理。

    转自:cocss » 未知宽度水平居中的几种方法

    展开全文
  • 4.高端的css3 flex-box 居中方案  <div class="test">asdasdfasdfasdfasdfasdfasdfasdffsd .parent{position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; -webkit-box-...

    <body>
      <div><p>What is CSS?</p></div>
    </body>

    1.子元素

      div{text-align:center}

      p{display:inline-block}

    2.淘宝分页:

      div{position:relative; left:50%; float:left;}
      p{position:relative; left:-50%;}

    3.利用diplay:table来解决:

    <div id="box">
         <span><div id="inner">11111111111111111111</div> </span>
    </div>

    #box{width:100%;height:100%; display:table;text-align:center;}
    #box span{width:100%;display:table-cell; vertical-align:middle;}
    #inner{display:inline-block;width:200px; border:1px solid #000;}

    4.高端的css3 flex-box 居中方案

    <div class="parent">
        <div class="test">asdasdfasdfasdfasdfasdfasdfasdffsd</div>
    </div>

    .parent{position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box;  -webkit-box-align: center;-webkit-box-pack: center;}

    .test{-webkit-box-flex: 0;background: #CCC;}

    展开全文
  • 未知宽度div水平居中

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


    作者:lingyired
    链接:https://www.zhihu.com/question/19652330/answer/24592006
    来源:知乎

    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。




    float:为了让父级宽度等于子级

    展开全文
  • 导航条水平居中 nav{ text-align: center; } nav ul{ display: inline-block; } nav ul li{ float:left; } nav ul li+
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>导航条水平居中</title>
        <style>
            nav{
                text-align: center;
            }
            nav ul{
                display: inline-block;
            }
            nav ul li{
                float:left;
            }
            nav ul li+li{
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
    <nav>
        <ul>
            <li>adasa1</li>
            <li>adasa2</li>
            <li>adasa3</li>
            <li>adasa4</li>
            <li>adasa5</li>
        </ul>
    </nav>
    </body>
    </html>

    展开全文
  • 1.相对浮动 我的第一个 HTML 页面 .unknow_width_center1 {position:relative; left:50%; float:left;} <li><a href="#">1</a></li> <li><a href="#">2</a></li> ...未知宽度水平居中
  • 淘宝分页: div{position:relative; left:50%; float:left;} p{position:relative; left:-50%;} 转载于:https://www.cnblogs.com/lrxsblog/p/6062572.html
  • 第一第二种方法都可用于已知高度的垂直水平居中 < div class = " c " > < div class = " d " > div > div > .c { width : 200px ; height : 200px ; /* border: 1px solid ...
  • 两种以上方式实现已知或者未知宽度的垂直水平居中 /** 1 **/ .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px ...
  • 使用过一种算是相对来说比较好理解一些的吧算是,代码如下: <style>  width:800px;  height:400px;  margin:0 auto;  position:absolute;  left:50%;  top: 50%;  transform:translate(-...b...
  • // 这段代码不是真正的水平居中,div设置成inline-block会产生空隙,所以.zi靠左边一点 <div class="zi"></div> // class为zi2的div是个内容为空的元素 <div class="zi2"></div> css代码3: .fu { ...
  • 未知宽度居中

    2016-03-01 10:47:00
    在某些特定的场合,在没有知道宽度的情况下却要求水平居中,今找到些解决方法,现转过来一起学习学习 方案一、利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动” .unknow_width_center1{...
  • .wrapper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } } .wrapper { position: relative; .box { ......
  • 垂直水平居中 .wrap{ background-color: #ccc; } .test { background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50% -50%); } 水平垂直...
  • 方法一:实现已知宽度的垂直水平居中 // 1 .wraper {  position: relative;  .box {  position: absolute;  top: 50%;  left: 50%;  width: 100px;  height: 100px;  margin: -50px 0 0 -50px;  } } ...
  • } //7、margin:auto实现绝对定位元素的居中 .element { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */ } //8、 .parent{ ...
  • .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .wraper { display: table; .box { display: tab...
  • margin:auto实现绝对定位元素的居中 .element { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */ } 8.  .parent{ ...
  • 我不知道我的宽度和高是多少,我要实现水平垂直居中 </div> .wrapper { padding: 200px 20px; background:orange; color:#fff; position:absolute; top:50%; left:50%; border-radius: 5px...
  • 4、未知box宽高, 内容垂直居中 .box-wrapper { display: table-cell; vertical-align: middle; width: 400px; text-align: center; .box{ display: inline-block; } }   转载于:...
  • 2020-5-11 补充: 第三种:未知宽度图片水平垂直居中方法 position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%); 前提:父盒子有position属性,且有宽高,不然是不会生效的。利用...
  • 已知宽度时,在垂直方向上:设置height属性值与line-height属性值相等 (博文尚美案例:在一个标题栏中,分为...未知宽度时,垂直方向和水平方向上都可以通过transform属性来设置 translateX()或 translateY() ...
  • 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素(parent)可以动态的改变高度(table元素的特性) 缺点:IE8以下不支持 HTML结构: ...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 166
精华内容 66
关键字:

未知宽度水平居中