如何垂直对齐div中的项目？

Question

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

div中的项目不是垂直对齐的。如何正确对齐div中间的项目？最后一个div中的图片比其他div中的图片小，所以它已经上升了。如何将所有图片放在中间？

Answer 1

这可以通过为img dom元素指定所需的图像高度（其他两个图像的高度）来实现。

在这种情况下，我们将以下CSS规则应用于.features-content img

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

完整示例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

点击代码段右上角的全屏按钮，以便查看包含项目并排的更宽视图;如您的示例屏幕截图所示。

Answer 2

您可以使用以下css属性 -

vertical-align: middle;

You can check in detail on here

Answer 3

如果您使用的是Bootstrap 4，只需将d-flex align-items-center添加到row类，即可垂直对齐。

在你的情况下，

与其他两个文本相比，第三列h1文本长度更重要，因此设计中存在一些问题。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

为图像添加vertical-align，margin：0 auto;为div容器。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;