对齐页面上的 div 个元素

Question

我需要在页面上对齐一些 <div> 元素。

当前页：!

基本上我需要将中间行的标题居中到主标题。但我不确定该怎么做。我的代码：

.our-services-title {
  font-family: "Montserrat";
  font-weight: 300;
  font-size: 38px;
  display: flex;
  justify-content: center;
  color: #101031;
}

.services-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 141px;
  margin-top: 64px;
  margin-left: 170px;
  justify-content: center;
}

.s-list-item {
  flex: 0 0 33.333333%; /* play with this number */
  display: flex;
  align-items: top;
}

.s-list-item img {
  width: 98px;
}

.s-list-item div {
  display: inline-block;
  margin-left: 30px;
}

.service-name {
  font-family: "Hind";
  font-weight: 700;
  font-size: 22px;
}

.service-desc {
  font-family: "Hind";
  font-weight: 400;
  font-size: 16px;
  margin-top: 4px;
}

<div>
  <p className="our-services-title">Lorem Ipsum Lorem</p>

  <div className="services-list">
    <div className="s-list-item">
      <img className="" src={Outsourced} alt="" />
      <div>
        <p className="service-name">Lorem Ipsum Lorem</p>
        <p className="service-desc">Lorem Ipsum Lorem</p>
      </div>
    </div>
    <div className="s-list-item">
      <img className="" src={Compliance} alt="" />
      <div>
        <p className="service-name">Lorem Ipsum Lorem</p>
        <p className="service-desc">Lorem Ipsum Lorem</p>
      </div>
    </div>
    <div className="s-list-item">
      <img className="" src={Bespoke} alt="" />
      <div>
        <p className="service-name">Lorem Ipsum Lorem</p>
        <p className="service-desc">Lorem Ipsum Lorem</p>
      </div>
    </div>
    <div className="s-list-item">
      <img className="" src={Licence} alt="" />
      <div>
        <p className="service-name">Lorem Ipsum Lorem</p>
        <p className="service-desc">Lorem Ipsum Lorem</p>
      </div>
    </div>
    <div className="s-list-item">
      <img className="" src={Training} alt="" />
      <div>
        <p className="service-name">Lorem Ipsum Lorem</p>
        <p className="service-desc">Lorem Ipsum Lorem</p>
      </div>
    </div>
    <div className="s-list-item">
      <img className="" src={Remediation} alt="" />
      <div>
        <p className="service-name">Lorem Ipsum Lorem</p>
        <p className="service-desc">Lorem Ipsum Lorem</p>
      </div>
    </div>
  </div>
</div>

谢谢

Answer 1

您可以尝试更改每个元素之间的边距，这样可以减少每个 div 之间的空白。

Answer 2

如果您希望将标题与中间行的文本对齐，使用 justify-content: center 可能不是最好的选择。

原因是，标题将根据标题的长度居中。这意味着即使你最终将标题 Our Services 与中间行的内容对齐（使用边距/填充），如果标题发生变化或者网页/应用程序支持语言翻译，标题的长度会改变，这意味着标题将不再与中间栏内容对齐。

确保标题始终与中间栏中的内容对齐的一种简单方法是将标题和中间栏包含在同一 div。

因此，页面将 divided 成三个垂直 <div>s，具有网格样式（2 列和 3 行），如下所示： Image_Divided_Into_Divs

最简单形式的代码如下所示：

.main-container {
    display: flex;
    height: 100%;
}
.child-container {
    flex: 1 auto;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 3fr 3fr;
}

<div class="main-container">
  <div class="child-container">
    <div></div> <!-- empty placeholder div for the grid-->
    <div></div>
    <div>image1</div>
    <div>text1</div>
    <div>image2</div>
    <div>text2</div>
  </div>
  <div class="child-container">
    <div></div>
    <div>Our Services</div>
    <div>image3</div>
    <div>text 3</div>
    <div>image4</div>
    <div>text 4</div>
  </div>
  <div class="child-container">
    <div></div>
    <div></div>
    <div>image5</div>
    <div>text5</div>
    <div>image6</div>
    <div>text6</div>
  </div>
</div>

对齐页面上的 div 个元素

Align div elements on page

html

css

flexbox