试图将3个div块并排放置，两者之间有间隙，它们彼此水平对齐

#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;
}

As you can see I've set up the three blocks to align next to each other but I'm just struggling to centre them with spaces between. I've set it so that the blocks all float alongside each other but they simply go to the left as designated with the float left, is there a way I can make them centred?

正如你所看到的那样,我已经将三个块设置为彼此相邻,但我只是在努力将它们置于中间位置。我已经将它设置为使得所有块都彼此并排浮动,但它们只是向左移动,因为浮动左边是指定的,有没有办法让它们居中?

1 个解决方案

#1

Don't use float, use display:inline-block and on the parent container add text-align:center

不要使用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>