水平对齐 html div 块

Question

我正在设计一个网站。目前，我正在尝试将多个 div 块按行对齐。我的代码如下

.main-content h3 {
  margin-bottom: 20px;
  font-size: 2em;
  color: #333;
  text-align: center;
}

.category-select a {
  display: flex;
  justify-content: start;
  padding: 15px 0px 0px 10em;
  font-size: 1em;
  color: #27285f;
}

.category-title {
  display: inline-block;
  padding: 0px 10px 0px 10em;
}

<div class="main-content">
  <h3>please choose a category</h3>
  <div class="group-select">
    <div class="category-select">
      <a href="#">Housing</a>
    </div>
    <div class="category-title">
      <a href="#">Housing Available</a> ...
    </div>
  </div>
  <div class="group-select">
    <div class="category-select">
      <a href="#">For Sale</a>
    </div>
    <div class="category-title">
      <a href="#">Appliance</a> ...
    </div>
  </div>
  <div class="group-select">
    <div class="category-select">
      <a href="#">Jobs</a>
    </div>
    <div class="category-title">
      <a href="#">Admin Office</a> ...
    </div>
  </div>
</div>

类别并未如图所示水平逐行对齐：

我尝试在类别标题类中更改添加边距并将其设置为自动，但它不起作用。是否是 inline-block 属性有问题？

Answer 1

希望有帮助

.main-content h3 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 32px;
  color: #333;
  text-align: center;
}

.categories {
  padding: 0 60px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
} 

.categories-wrapper {
  display: flex;
  justify-content: end;
  flex-direction: column;
}

.categories-wrapper > div {
  margin-bottom: 15px;
}

.categories-wrapper > div a {
  display: flex;
  text-decoration: none;
}

<div class="main-content">
  <h3>please choose a category</h3>
</div>

<section class="categories">
  <div class="categories-wrapper">
    <div class="">
      <a href="#">Housing</a>
      <a href="#">Housing Available ...</a>
    </div>
    <div>
      <a href="#">For Sale</a>
      <a href="#">Appliance ...</a>
    </div>
    <div>
      <a href="#">Jobs</a>
      <a href="#">Admin Office ...</a>
    </div>
  </div>
  <div class="categories-wrapper">
    <div class="">
      <a href="#">Housing Wanted</a>
    </div>
    <div>
      <a href="#">Clothes</a>
      <a href="#">Household</a>
    </div>
    <div>
      <a href="#">Contractor</a>
      <a href="#">Job Seeking</a>
    </div>
  </div>
  <div class="categories-wrapper">
    <div class="">
      <a href="#">Other</a>
    </div>
    <div>
      <a href="#">For Sale</a>
      <a href="#">Appliance ...</a>
    </div>
    <div>
      <a href="#">Jobs</a>
      <a href="#">Admin Office ...</a>
    </div>
  </div>
  <div class="categories-wrapper">
    <div class="">
      <a href="#">Housing</a>
      <a href="#">Housing Available ...</a>
    </div>
    <div>
      <a href="#">For Sale</a>
      <a href="#">Appliance ...</a>
    </div>
    <div>
      <a href="#">Jobs</a>
      <a href="#">Admin Office ...</a>
    </div>
  </div>
  <div class="categories-wrapper">
    <div class="">
      <a href="#">Housing</a>
      <a href="#">Housing Available ...</a>
    </div>
    <div>
      <a href="#">For Sale</a>
      <a href="#">Appliance ...</a>
    </div>
    <div>
      <a href="#">Jobs</a>
      <a href="#">Admin Office ...</a>
    </div>
  </div>
</section>