html - 将三个 div 容器居中并排放置

Question

我想让三个 div 居中。最后它应该是这样的

现在是我的问题。在我的 css 中，我使用了 float 关键字，但似乎这并不能确定。 div 仍然分开。

正如您在以下代码示例中看到的那样，容器变得越来越奇怪。

如果有人能帮助我，那就太棒了!

#selectionElementContainer {
  height: 70%;
  width: 100%;
  margin-top: 50px;
}

#selectionElementLeft {
  float: left;
}

#selectionElementCenter {
  margin: 0 auto;
}

#selectionElementRight {
  float: right;
}

.selectionElementImage {
  cursor: default;
  text-align: center;
  margin-top: 10px;
}

.selectionElementHeader {
  cursor: default;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  color: #333f4b;
}

.selectionElementText {
  cursor: default;
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #4c545c;
}

.selectionElementLinkContainer {
  cursor: default;
  margin-top: 10px;
}

.selectionElementBtn {
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 18px;
  background-color: white;
  color: #1bbee7;
  transition: 0.5s;
}

.selectionElementBtn:hover {
  color: #a4d662;
  transition: 0.5s;
}

    <div id="selectionElementContainer">
      <div id="selectionElementLeft">
        <div class="selectionElementImage">
          <img src="bild">
        </div>
        <div class="selectionElementHeader">
          Title
        </div>
        <div class="selectionElementText">
          Text
        </div>
        <div class="selectionElementLink">
          <button class="selectionElementBtn">Link</button>
        </div>
      </div>
      <div id="selectionElementCenter">
        <div class="selectionElementImage">
          <img src="bild">
        </div>
        <div class="selectionElementHeader">
          Title
        </div>
        <div class="selectionElementText">
          Text
        </div>
        <div class="selectionElementLink">
          <button class="selectionElementBtn">Link</button>
        </div>
      </div>
      <div id="selectionElementRight">
        <div class="selectionElementImage">
          <img src="bild">
        </div>
        <div class="selectionElementHeader">
          Title
        </div>
        <div class="selectionElementText">
          Text
        </div>
        <div class="selectionElementLinkContainer">
          <button class="selectionElementBtn">Link</button>
        </div>
      </div>
    </div>

Answer 1

检查 flexbox在这种情况下，父容器是 flex 的，子容器也具有针对您的特定情况的列方向。您可以使用伪元素 nth-child(n) 定位嵌套元素例如 .flex-child:nth-child(2) h2 {color: green;}将使第二个<h2>绿色Fiddle

#flex-parent{
  display:flex;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-child{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.flex-child img{
  border-radius: 50%;
}

.flex-child a{
  margin-bottom: 20px; /*So you can have space when the screen resize*/
}

<div id="flex-parent">
  <div class="flex-child">
    <img src="https://placehold.it/100x100">
    <h2>Title</h2>
    <p>Text</p>
    <a href="#">Link</a>
  </div>
  <div class="flex-child">
    <img src="https://placehold.it/100x100">
    <h2>Title</h2>
    <p>Text</p>
    <a href="#">Link</a>
  </div>
  <div class="flex-child">
    <img src="https://placehold.it/100x100">
    <h2>Title</h2>
    <p>Text</p>
    <a href="#">Link</a>
  </div>              
</div>