CODEWITHSUNDEEP
htmlcsstwitter-bootstrapvertical-alignment
Ayrton Senna
Ayrton Senna

Reputation: 3835

Vertically middle an img in a Bootstrap well

I have been trying to place an img in the middle of a fixed height div but I'm doing something wrong. I tried a few different variants looking at other solutions on SO but I think I am missing something.

Here is my code and code snippet:

// Style
.test-ht {
  min-height: 250px;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-3 well test-ht">
      <img src="http://placehold.it/350x150" class="img-responsive" />
    </div>
  </div>
</div>

Upvotes: 1

Views: 85

Answers (4)

AndrewL64
AndrewL64

Reputation: 16301

Add the pixel height to a parent div wrapping your img div and your image, say, img-parent and add height: 100% and display:inline-block; to the wrapper div like this:

.img-parent  {
    height: 250px;
}
.test-ht {
  height: 100%;
  vertical-align: middle;
  display:inline-block;
}

Via- How to vertically align an image inside div

Upvotes: 1

Kinburn101
Kinburn101

Reputation: 1162

I have found it pretty easy to vertically align items with bootstrap in most instances by using a series of custom classes for each position.

Example:

.align-middle {
display:table-cell;
vertical-align:middle;
float:none;
}

I then apply that custom class to any column where I would like something middle aligned within the row.

Upvotes: 2

Todd Day
Todd Day

Reputation: 47

Try changing the CSS like so:

.test-ht {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Upvotes: 0

Jonny Henly
Jonny Henly

Reputation: 4213

I have been trying to place an img in the middle of a fixed height div.

Remove the class from the div and add the class to the img. Try the following code snippet.

// Style
.test-ht {
    width: 350px;
    height: 150px;
}

.test-ht:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.test-ht :first-child {
    display:inline-block;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-3 well">
      <img class="img-responsive test-ht" src="http://placehold.it/350x150" />
    </div>
  </div>
</div>

Upvotes: 0

Related Questions