How to vertically align the items in the div?

问题

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

.features img {
  width: 100px;
}

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

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="features">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="features-content">
          <img src="https://image.flaticon.com/teams/slug/freepik.jpg" alt="Compass Logo">
          <h1>Adventure</h1>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="features-content">
          <img src="https://image.flaticon.com/teams/slug/freepik.jpg" alt="Compass Logo">
          <h1>Fun &amp; Safety</h1>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="features-content">
          <img src="https://image.flaticon.com/teams/slug/freepik.jpg" alt="Compass Logo">
          <h1>Impeccable Service</h1>
        </div>
      </div>
    </div>
  </div>
</div>

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 div so it has gone up. how to put all the pictures in the middle?

回答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-content img {
  object-fit: none;
  width: 100%;
  height: 150px;
}

Complete example

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

.features img {
  width: auto;
}

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

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

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

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="features">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x150" alt="Compass Logo">
          <h1>Adventure</h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x150" alt="Compass Logo">
          <h1>Fun &amp; Safety</h1>
        </div>
      </div>
      <div class="col-md-4">
        <div class="features-content">
          <img src="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.

回答2:

you can use following css property -

vertical-align: middle;

You can check in detail on here

回答3:

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

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

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

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

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

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

回答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:40px 100px;
  float: left;
  width: 100%;
  }

 .features img{
    width: auto;
  }

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

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

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

来源：https://stackoverflow.com/questions/47427256/how-to-vertically-align-the-items-in-the-div

标签

html5

twitter-bootstrap

css3

twitter-bootstrap-3