对齐页面上的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

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

原因是，标题将以标题的长度为中心。这意味着，即使您最终将标题Our Services与中间行中的内容对齐(使用边距/填充)，如果标题更改或网页/应用程序支持语言翻译，标题的长度也会发生变化，这意味着标题将不再与中间列内容对齐。

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

因此，页面将被分成三个垂直的<div>，网格样式(2列和3行)，如下所示：迪夫

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

​

.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>

​

Answer 2

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