如何正确对齐div中的项目？

Question

取得

要

如第一张图片中所示，项目未正确对齐，如何在第二张图片上对齐？这是我试过的代码。垂直对齐属性似乎也不起作用，或者我可能使用它错了。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是您上传的图片高度不同。

A。在上传之前将它们与CSS相同

请参阅以下使用css更改高度的示例（我将类col-xs-12更改为col-xs-4仅用于示例目的，因此它们将在代码段中排成3行）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

B。或者如果你不想改变图像的高度（如果你想要你的图像，你可以将cols相同的高度设置为文本绝对位于底部的位置）有不同的高度）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

C。至少＆＃39;清洁＆＃39;解决方案是在图像上添加特定的填充底部或边距底部，直到h1对齐。 （与h1）的边距顶部或填充顶部相同

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;