元素是浮动的，如何让其居中?

熙哥_tito

已于 2023-06-06 10:01:38 修改

阅读量304

点赞数 1

分类专栏： css 文章标签： javascript css html

于 2023-06-05 11:22:53 首次发布

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131044530

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

ui居中的方式有很多，浮动元素如何居中呢？

浮动的元素要设置居中可以在外层包裹一个div 然后加上 width： fit-content; margin: 0 auto ; 这样可以设置为水平居中;

<style>
    .container {
      
      width: 500px;
      height: 300px;
      border: 1px solid rebeccapurple;
      margin: 0 auto;
    }
    .container::after {
      display: table;
      clear: both;
      content: "";
    }
    .main {
      width: fit-content;
      margin: 0 auto;
    }
    /*                             浮动的元素 要设置居中 可以在外层包裹一个div 然后加上 width： fit-content;  margin: 0 auto ;可以设置为水平居中                          */
    .he {
      width: 120px;
      height: 120px;
      border: 1px solid gold;
      float: left;
    }
  </style>

以下是代码解构：

<body>
  <div class="container">
    <div>
      <h1>goodgoodgoodgoodgood</h1>
    </div>
    <div class="main">
      <div class="he">

      </div>
    </div>
  </div>
</body>