让几个横向排列的浮动子div居中显示的方法-前端开发

要让几个横向排列的浮动子div居中显示，我们可以采用以下的方法：

要让几个横向排列的浮动子div居中显示，我们可以采用以下的方法：

步骤一：设置包含块的宽度和text-align属性

我们可以为包含块设置一个固定的宽度，并将其水平居中显示。为此，可以在包含块的CSS中设置如下属性：

.container {
  width: 960px;
  margin: 0 auto;
}

这样，就可以将包含块的宽度设置为960像素，并将其水平居中显示。

步骤二：设置子div的浮动属性

接下来，我们需要设置子div的浮动属性，以便它们可以水平排列。例如，我们可以使用如下的CSS来设置子div的浮动属性：

.box {
  width: 200px;
  height: 200px;
  float: left;
}

这样，就可以将子div的宽度和高度设置为200像素，并将其设置为左浮动。

步骤三：使用text-align属性将子div居中

现在，我们需要使用text-align属性将子div居中。我们可以在包含块的CSS中设置以下属性：

.container {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}

这将使所有子div相对于包含块的中心点居中。

示例说明

示例一

HTML代码如下：

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

对应的CSS代码如下：

.container {
  width: 960px;
  margin: 0 auto;
  text-align: center;
}
.box {
  width: 200px;
  height: 200px;
  float: left;
  background-color: #ccc;
  margin-right: 20px;
}
.box:last-child {
  margin-right: 0;
}

代码中我们设置了包含块的宽度为960像素，将子div的宽度和高度均设置为200像素，并设置了左浮动。同时，我们将包含块的text-align属性设置为center，使子div能够居中显示。最后，我们通过设置最后一个子div的margin-right为0来去除最后一个子div和其他子div之间的间距。

示例二