html - 尝试将 3 个 div block 彼此并排居中并留有间隙，它们在水平方向上彼此相邻对齐

Question

#block1 {
    background-color: blue;
    font-family:"Arial Black", Gadget, sans-serif;
    width: 25%;
    padding: 4px;
    border-radius: 1em;
    margin-left: auto;
    margin-right: auto;
    float: left;
    display: block;
}

#block1 p {
            color: white;
}

#block2 {
        background-color: blue;
        font-family:"Arial Black", Gadget, sans-serif;
        width: 25%;
        padding: 4px;
        border-radius: 1em;
        margin-left: auto;
        margin-right: auto;
        float: left;
        display: block;
}

#block2 p {
            color: white;
}

#block3 {
    background-color: blue;
    font-family:"Arial Black", Gadget, sans-serif;
    width: 25%;
    padding: 4px;
    border-radius: 1em;
    margin-left: auto;
    margin-right: auto;
    float: left;
    display: block;
}

#block3 p {
        color: white;
}

如您所见，我已将三个 block 设置为彼此相邻对齐，但我只是努力将它们居中，中间留有空格。 我已将其设置为所有 block 都并排 float ，但它们只是按照指定的 float 向左移动到左侧，有没有办法让它们居中？

Answer 1

不要使用 float ，使用 display:inline-block 并在父容器上添加 text-align:center

.container {
  text-align: center;
}
.block {
  background-color: blue;
  font-family: "Arial Black", Gadget, sans-serif;
  width: 25%;
  padding: 4px;
  border-radius: 1em;
  display: inline-block;
  height: 250px;
  margin: 0 10px;
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>