zoukankan html css js c++ java

当div没有设置宽度，使用width的fit-content和margin:auto实现元素的水平居中

当我们做水平居中的时候，会有许多方法，margin:0 auto,或者test-align:center,以及flex布局。当元素的width不固定的时候，我们如何实现水平居中呢，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    ul{
      margin:0 auto;
    }
    li{
      list-style: none;
      float: left;
      margin-right: 10px;
    }
  </style>
</head>
<body>


<div class="navbar center">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/">关于我们</a></li>
    <li><a href="/">产品展示</a></li>
    <li><a href="/">客户支持</a></li>
    <li><a href="/">联系我们</a></li>
  </ul>
</div>

</body>
</html>

　　效果如下：

并没有居中，这个时候我们可以用fit-content来实现水平居中了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    ul{
       -moz-fit-content;
       fit-content;
      margin:0 auto;
    }
    li{
      list-style: none;
      float: left;
      margin-right: 10px;
    }
  </style>
</head>
<body>

<div class="navbar center">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/">关于我们</a></li>
    <li><a href="/">产品展示</a></li>
    <li><a href="/">客户支持</a></li>
    <li><a href="/">联系我们</a></li>
  </ul>
</div>

</body>
</html>

　　此时我们就可以实现水平居中了，但是fit-content这个是css3新增的属性，仅支持谷歌和火狐浏览器

查看全文

相关阅读:
【Rust】匹配绑定
 【Rust】iflet
【Rust】结构体匹配
 【Rust】闭包
 【Rust】函数
 【Rust】方法
 【Rust】whilelet
【Rust】匹配保护
 【Rust】闭包捕获变量
 优先队列安静点

原文地址：https://www.cnblogs.com/mmykdbc/p/8478439.html