0

Achieved enter image description here

Want enter image description here

as seen in the first picture the items are not properly aligned how can it be aligned like on the second picture? Here's the code I tried. Vertical-align attribute also doesn't seem to work, or may be i used it wrong.

    .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>
Harden Rahul
  • 930
  • 8
  • 15
Ashutosh Shrestha
  • 140
  • 3
  • 11
  • Possible duplicate of [How to vertically align the items in the div?](https://stackoverflow.com/questions/47427256/how-to-vertically-align-the-items-in-the-div) – UncaughtTypeError Nov 22 '17 at 08:14
  • try fooling around with `vertical-align:`, `display:`, and `padding:` – David Nov 22 '17 at 08:15
  • @UncaughtTypeError yes, i felt like i didnt present my question correctly their so i had to repost . – Ashutosh Shrestha Nov 22 '17 at 08:17
  • Couldn't you update your existing question? – UncaughtTypeError Nov 22 '17 at 08:19
  • the problem is that your uploaded images are not the same height. Make them the same either with CSS either before uploading them – Mihai T Nov 22 '17 at 08:23
  • You should learn about flexboxes: once you'll have read this (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) you won't need bootstrap anymore for positioning/grid/alignment. – sjahan Nov 22 '17 at 08:34
  • You can't use vertical align on bootstrap element because is floated. You can change its behavior using display flex or not using bootstrap. – Germano Plebani Nov 22 '17 at 08:53
  • Possible duplicate of [vertical-align with Bootstrap 3](https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) – Germano Plebani Nov 22 '17 at 08:54

1 Answers1

2

The problem is that your uploaded images are not the same height.

A. Make them the same either with CSS either before uploading them

See below example with changing height with css ( i changed the class col-xs-12 to col-xs-4 for example purposes only, so they will be 3 in row in the snippet )

.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. Or you can make the cols same height an position the text absolutely at the bottom if you don't want to change the height of the images ( if you want your images to have different heights )

.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. The least 'clean' solution would be to add specific padding-bottom or margin-bottom to the images until the h1 are aligned. ( same with margin-top or padding-top to the h1 )

.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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32