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

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

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>

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

1 个答案: