css中浮动元素如何居中

在CSS中，我们经常使用浮动元素来实现块级元素的横向排列，例如导航栏菜单。但问题是，如何把浮动元素居中呢？
下面我们就来介绍如何实现居中浮动元素的方法。
首先，在HTML文件中定义一组浮动元素，例如：

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div> 

接下来，在CSS文件中为parent设置text-align:center属性，同时为child设置display:inline-block属性，例如：

.parent {
  text-align:center;
}
.child {
  float:left;
  display:inline-block;
  /* 设置宽度和高度 */
} 

这样就可以实现居中浮动元素的效果了。如果需要设置元素的宽度和高度，可以在child的样式中添加相关属性。
需要注意的是，当元素的总宽度超出父级容器的宽度时，会自动换行。这时，可以通过设置white-space:nowrap属性，防止元素换行。同时，需要设置overflow:hidden属性，使得父级容器不会出现滚动条。
综上所述，通过设置text-align:center和display:inline-block属性，可以轻松实现居中浮动元素的效果。同时，为了避免元素换行，还需要设置相关属性。