html - 如何使用 CCS 和 HTML 将三张卡片对齐在一行中？

Question

我正在建立一个网站，但我遇到了问题。当我试图将三张卡片排成一行时，它们停留在左侧。

HTML 代码：

    <div class="row">
    <div class="column">
      <div class="card">
        <h3 class="card-title">Ramndom1</h3>
        <p class="card-text">hfejhgfjhejhfvhjhefgvfjhefvfvevjhfvfvejhvfvjhf</p>
      </div>
    </div>
  
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random2</h3>
        <p class="card-text">fheguighefgheghhjfggfefgghf</p>
      </div>
    </div>
    
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random3</h3>
        <p class="card-text">fhekfhejkfjhegfghfjhegbfjhfjhefgfehf</p>
      </div>
    </div>
  </div>

CSS 代码：

  .column {
  width: 33%;
  padding: 0 15px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.card {
  width: 450px;
  height: 450px;
  background: #8fb1ff 0% 0% no-repeat padding-box;
  border-radius: 20px;
  opacity: 1;
}
.card-title {
  text-align: center;
  font: normal normal bold 63px/84px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;
}
.card-text {
  text-align: center;
  font: normal normal bold 24px/32px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;
  padding: 5px;
}

我无法使用此代码对齐它。可能是什么问题？我尝试使用 justify-content，但它没有用。我不知道我还能做什么。你能帮我解决这个问题吗？

Answer 1

添加这个：

margin-left: auto;
margin-right: auto;

在.card你的 CSS 中。

Answer 2

你在寻找这样的东西吗

.column {
  width: calc(33% - 30px);
  padding: 0 15px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.card {
  background: #8fb1ff 0% 0% no-repeat padding-box;
  border-radius: 20px;
  opacity: 1;
  overflow: hidden;
}
.card-title {
  text-align: center;
  font: normal normal bold 63px/84px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;
}
.card-text {
  text-align: center;
  font: normal normal bold 24px/32px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;
  padding: 5px;
}

 <div class="row">
    <div class="column">
      <div class="card">
        <h3 class="card-title">Ramndom1</h3>
        <p class="card-text">hfejhgfjhejhfvhjhefgvfjhefvfvevjhfvfvejhvfvjhf</p>
      </div>
    </div>
  
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random2</h3>
        <p class="card-text">fheguighefgheghhjfggfefgghf</p>
      </div>
    </div>
    
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random3</h3>
        <p class="card-text">fhekfhejkfjhegfghfjhegbfjhfjhefgfehf</p>
      </div>
    </div>
  </div>