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

最新推荐文章于 2024-05-14 23:06:34 发布

会做饭的技术男

最新推荐文章于 2024-05-14 23:06:34 发布

阅读量731

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjkbihhb1jjb.html

版权

前端专栏收录该内容

2508 篇文章 12 订阅

订阅专栏

当我们做水平居中的时候，会有许多方法，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{
      width: -moz-fit-content;
      width: 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新增的属性，仅支持谷歌和火狐浏览器

会做饭的技术男

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
当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{ margi
复制链接

扫一扫