如何实现浮动元素水平居中

关注

最新推荐文章于 2025-03-12 18:47:36 发布 · 1.1k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

从C语言到ST语言：在Codesys里移植循环队列，我踩过的坑和最佳实践本文分享了从C语言到ST语言在Codesys环境下移植循环队列的实战经验，重点解析了内存管理、指针操作、线程安全等关键差异与最佳实践。通过对比C语言的动态内存分配与ST语言的受控管理，提供了工业级实现的技巧与调试方法，帮助开发者在工业自动化领域高效移植数据结构。阅读详情

1、错误示范

当HTML结构如下所示：

<div id="container">
    <div class="left">left</div>
</div>

同时，CSS这样写：

#container{
  width:400px;
  height:110px;
  border:1px solid black;
}
#container div{
  width:100px;
  height:100px;
  float:left;
  margin:0 auto;
  background-color: brown;
}

效果如下：

很明显，图片并没有水平居中。这是因为浮动元素脱离了普通文档流，margin：0 auto也就不起作用了。

2、解决方法

在浮动元素外面再嵌套一层div，需要注意的是，浮动元素外层嵌套的div宽度应该设置为浮动元素的宽度之和，否则无法实现真正的水平居中。

<style>
  #container {
    width: 400px;
    height: 110px;
    border: 1px solid black;
  }

  .content {
    width: 100px;
    margin: 0 auto;
  }

  .content div {
    width: 100px;
    height: 100px;
    float: left;
    background-color: brown;
  }
</style>

<body>
  <div id="container">
    <div class="content">
      <div class="left">left</div>
    </div>
  </div>
</body>