Vertically middle an img in a Bootstrap well

Question

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>

score 2 · Answer 1 · answered Mar 30 '15 at 00:04

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

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

edited May 23 '17 at 12:22

Community

1
1

answered Mar 29 '15 at 23:15

AndrewL64

15,794
8
47
79

score 0 · Answer 3 · answered Mar 29 '15 at 23:15

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>

score 0 · Answer 4 · answered Mar 29 '15 at 23:17

0

Try changing the CSS like so:

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

answered Mar 29 '15 at 23:17

Todd Day

53
1
11

Vertically middle an img in a Bootstrap well

4 Answers4