How To Vertically Align The Items In The Div?

April 18, 2024 Post a Comment

The items in the div are not vertically aligned . How do I properly align the items in the middle of the div? The picture in the last div is smaller than the pictures in other di

Solution 1:

This can be achieved by specifying the desired image height (that of the other two images) to the img dom element.

In this case, we apply the following CSS rules to .features-content img

.features-contentimg {
  object-fit: none;
  width: 100%;
  height: 150px;
}

Complete example

.features {
  background-color: #0375b4;
  padding: 40px100px;
  float: left;
  width: 100%;
}

.featuresimg {
  width: auto;
}

.features-content {
  text-align: center;
}

.features-contenth1 {
  font-size: 24px;
  color: #ffffff;
  text-transform: uppercase;
  margin-top: 10px;
}

.features-contentimg {
  object-fit: none;
  width: 100%;
  height: 150px;
}

<!-- Latest compiled and minified Bootstrap CSS --><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><divclass="features"><divclass="container"><divclass="row"><divclass="col-md-4"><divclass="features-content"><imgsrc="http://via.placeholder.com/150x150"alt="Compass Logo"><h1>Adventure</h1></div></div><divclass="col-md-4"><divclass="features-content"><imgsrc="http://via.placeholder.com/150x150"alt="Compass Logo"><h1>Fun &amp; Safety</h1></div></div><divclass="col-md-4"><divclass="features-content"><imgsrc="http://via.placeholder.com/150x100"alt="Compass Logo"><h1>Impeccable Service</h1></div></div></div></div></div>

Click the full screen button on the upper-right portion of the code snippet in order to see a wider view with items side-by-side; as shown in your example screenshot.

Solution 2:

you can use following css property -

vertical-align: middle;

You can check in detail on here

Solution 3:

Add vertical-align for images, and margin:0 auto; for div container.

.features{
  background-color: #0375b4;
  padding:40px100px;
  float: left;
  width: 100%;
  }

 img{
    width: auto;
    vertical-align:middle;
  }

 .features-content{
    text-align: center;
    width:100%;
     display:inline-block;
      margin:0 auto;
  }

.features-contenth1{
 font-size:12px;
 margin:0;
 text-transform: uppercase;
 }

<divclass="container"><divclass="row"><divclass="col-md-4"><divclass="features-content"><imgsrc="images/compass.png"alt="Compass Logo"><h1>Adventure</h1></div></div><divclass="col-md-4"><divclass="features-content"><imgsrc="images/tube.png"alt="Compass Logo"><h1>Fun &amp; Safety</h1></div></div><divclass="col-md-4"><divclass="features-content"><imgsrc="images/diamond.png"alt="Compass Logo"><h1>Impeccable Service</h1></div></div></div></div>

Solution 4:

If you are using Bootstrap 4 just add d-flex align-items-center to row class to align vertically center.

In your case,

the third column h1 text length is grater when compare to other two so there is some issue in the design.

features{
  background-color: #0375b4;
  padding:40px100px;
  float: left;
  width: 100%;
  }

 .featuresimg{
    width: auto;
  }

 .features-content{
    text-align: center;
  }

.features-contenth1{
 font-size: 24px;
 color: #000;
 text-transform: uppercase;
 margin-top: 10px;
 }

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"rel="stylesheet"/><divclass="features"><divclass="container"><divclass="row d-flex align-items-center"><divclass="col-md-4"><divclass="features-content"><imgsrc="https://dummyimage.com/70x70/000/fff"alt="Compass Logo"><h1>Adventure</h1></div></div><divclass="col-md-4"><divclass="features-content"><imgsrc="https://dummyimage.com/70x70/000/fff"alt="Compass Logo"><h1>Fun &amp; Safety</h1></div></div><divclass="col-md-4"><divclass="features-content"><imgsrc="https://dummyimage.com/70x70/000/fff"alt="Compass Logo"><h1>Impeccable Service</h1></div></div></div></div></div>

Html5 Tutorial