CODEWITHSUNDEEP
htmlcssvertical-alignment
Agie971
Agie971

Reputation: 17

Vertical align items and text in divs

I've tried solutions to vertically align text in my divs that but since some sentences are on 1 line and others on 2 lines. I am not finding a solution that fits good on both.

This is my code:

.gridinstanttrack {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr;
  margin-bottom: 30px;
}

.gridinstanttrack1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  margin: auto;
}
<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Complete visibility into your entire shipment activity
    </h3>
  </div>
</div>
<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Streamlined communication with vendors, suppliers, and more
    </h3>
  </div>
</div>
<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Powerful turn-key analytics to make better decisions
    </h3>
  </div>
</div>

Is there an easy way to align them all?

I forgot part of the code here:

.gridinstanttrack2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  margin:auto;
  text-align: left;
}

Upvotes: 0

Views: 52

Answers (1)

Designer_Chakli
Designer_Chakli

Reputation: 96

you can use the flex property to achieve the same functionality with easiest way. Here is the code for the same.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

.gridinstanttrack {
  display:flex;
  align-items:center;
}

.gridinstanttrack1 {
    flex-basis: 15%
}
.gridinstanttrack2{
    flex-basis: 85%
}
</style>
</head>
<body>

<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Complete visibility into your entire shipment activity
    </h3>
  </div>
</div>
<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Streamlined communication with vendors, suppliers, and more
    </h3>
  </div>
</div>
<div class="gridinstanttrack">
  <div class="gridinstanttrack1">
    <img src="https://static1.squarespace.com/static/5c70ef0816b6403c514efd96/t/5fb14514e741ef42c92e7f63/1605453076915/baseline_wifi_white_18dp.png">
  </div>
  <div class="gridinstanttrack2">
    <h3 style="color: black">
      Powerful turn-key analytics to make better decisions
    </h3>
  </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions