html - 如何正确对齐 div 中的元素？

Question

达成

想要

如第一张图片所示，元素未正确对齐如何才能像第二张图片那样对齐？这是我试过的代码。 vertical-align 属性似乎也不起作用，或者可能是我用错了。

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

    .features img{
      width: auto;
    }


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

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

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

Answer 1

问题是你上传的图片高度不一样。

A. 在上传之前使用 CSS 使它们相同

请参见下面使用 css 更改高度的示例(我将类 col-xs-12 更改为 col-xs-4 仅用于示例目的，因此它们将是片段中的第 3 行)

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

.features img {
  width: auto;
}

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

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

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-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 col-sm-4 col-xs-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x250" alt="Compass Logo">
          <h1>Fun &amp; Safety</h1>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x200" alt="Compass Logo">
          <h1>Impeccable Service</h1>
        </div>
      </div>
    </div>
  </div>
</div>

B. 或者，如果您不想更改图像的高度(如果您希望图像具有不同高度)

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

.features img {
  width: auto;
  max-width:100%;
}

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

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

.features .row {
  display: flex;
  flex-wrap: wrap;
}

.features .row > div {
  position: relative;
  padding-bottom: 60px;
  border: 1px solid green;
  /*for visual example*/
}

.features .row > div h1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-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 col-sm-4 col-xs-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x250" alt="Compass Logo">
          <h1>Fun &amp; Safety</h1>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x200" alt="Compass Logo">
          <h1>Impeccable Service</h1>
        </div>
      </div>
    </div>
  </div>
</div>

C. 最不“干净”的解决方案是向图像添加特定的 padding-bottom 或 margin-bottom 直到 h1 对齐。 (与 h1 的 margin-top 或 padding-top 相同)

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

.features img {
  width: auto;
  max-width: 100%
}

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

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

.features .col-md-4:first-child img {
  padding-bottom: 100px;
}

.features .col-md-4:last-child img {
  padding-bottom: 50px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="features">
  <div class="container">
    <div class="row">
      <div class="col-md-4 col-sm-4 col-xs-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 col-sm-4 col-xs-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x250" alt="Compass Logo">
          <h1>Fun &amp; Safety</h1>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="features-content">
          <img src="http://via.placeholder.com/150x200" alt="Compass Logo">
          <h1>Impeccable Service</h1>
        </div>
      </div>
    </div>
  </div>
</div>