Align div elements on page

Issue

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

Current Page: Current Page

Goal: My 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

Solution

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

Answered By – Tash

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.