I need to align some <div> elements on a page.

Current Page:

Goal:

Basically I need to center the title in the middle row to the main title. But I'm not sure how to do that. My code:

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

Thanks

CodePudding user response：

You could try changing the margins between each element, which would make the whitespace between each div less.

CodePudding user response：

If you wish to align your title with the text in the middle row, using a justify-content: center might not be the best thing.

Reason being, the title will be centered based on the length of the title. This means that even if you end up aligning the title Our Services with the content in the middle row (using margins / padding), if the title changes or if the web page / application supports language translation, the length of the title would change, meaning the title would no longer be aligned with the middle column content.

An easy way to ensure that the title is always aligned with the content in the middle column is to include the title and the middle column within the same div.

So, the page would be divided into three vertical <div>s with grid styling (2 columns and 3 rows), as such: Image_Divided_Into_Divs

The code in its simplest form would look something like:

.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 >
  <div >
    <div></div> <!-- empty placeholder div for the grid-->
    <div></div>
    <div>image1</div>
    <div>text1</div>
    <div>image2</div>
    <div>text2</div>
  </div>
  <div >
    <div></div>
    <div>Our Services</div>
    <div>image3</div>
    <div>text 3</div>
    <div>image4</div>
    <div>text 4</div>
  </div>
  <div >
    <div></div>
    <div></div>
    <div>image5</div>
    <div>text5</div>
    <div>image6</div>
    <div>text6</div>
  </div>
</div>