如何垂直对齐div中的项目？ [英] 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>

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?

推荐答案

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

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

在你的情况下，

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

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>

这篇关于如何垂直对齐div中的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！