CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3responsive-design
Troyer
Troyer

Reputation: 7013

Vertical align image with near div with Bootstrap

I want to vertically align one image with his near div, the div have a dynamic height and I'm having a lot of trouble putting the image on the middle. There is the code I have:

<div class="row">
  <img class="col-sm-4 col-md-4" src="/img/height.svg"></img>
  <div class="col-sm-8 col-md-8"><span>Height</span><br/>335.00 mm</div>
</div>

And the result is:

First result

I want the image be on the middle of the div like this:

enter image description here

Upvotes: 1

Views: 514

Answers (2)

Neelam Khan
Neelam Khan

Reputation: 1121

If I understand correctly you are trying to vertically align a div and you have another div with an image in it.

The best way to vertically align the div is to put your image in as a background image and give that div a height which will stop the height from being dynamic & it gives you more control. For example;

<!-- Div with BG Image -->
<div class="col-sm-4 col-md-4">
   <div class="bg-image" style="background-image:url(/img/height.svg);"></div>
</div>

.bg-image {
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
   height: 250px; // this can be anything
}

<!-- Div to be centrally aligned -->
<div class="col-sm-4 col-md-4">
   <div class="bg-image-module">
     <div class="bg-image-module-block">
        <span>Height</span><br/>335.00 mm
     </div>
   </div>
</div>

Give the bg-image-module div these styles:

.bg-image-module {
   display: table;
   height: 250px; //this must be the same as the height on the bg-image div in order to vertically align the content.
}

.bg-image-module-block {
   display: table-cell;
   vertical-align: middle;
 }

This is a good way of vertically aligning content, you can change the height to be whatever you need and it can be changed responsively.

Upvotes: 2

Jim Fahad
Jim Fahad

Reputation: 635

You could use flexbox like:

.row {
  align-items: center;
  display: flex;
}
.row img {
  height: 25px;
  margin-right: 1rem;
  width: 25px;
}

See the fiddle: https://jsfiddle.net/72f7srr6/1/

Upvotes: 3

Related Questions