Vertical alignment of an image in a Twitter Bootstrap cell (height is unknown)

Question

I have a bootstrap grid and I am trying to center an image (200x100 per example provided) inside a cell.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
        </div>
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6">
                <img src="http://placehold.it/350x150">
            </div>
            <div class="col-xs-6 container">
                <img class="img" src="http://placehold.it/200x100">
            </div>
        </div>
    </div>
</body>
</html>

I've tried a lot of techniques provided on internet without any luck. (BTW most of them explicitly define a height) As a proof I provide some of them here:

Example1: a trick with padding-top: 100% increases a row which I do not need.

Example2: table/table-cell just not working

Example 3: a trick with inline-block and vertical align is not working

   <style>
        .container:before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        img {
            display: inline-block;
            vertical-align: middle;
        }
    </style>

Example 4: absolute position with top, left 50% and translate is working wrong

<style>
        .img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

score 4 · Answer 1 · answered Sep 15 '16 at 16:31

4

My favorite vertical alignment hack:

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

It uses translateY and top to sandwich an item into a container with unknown height. This requires IE10+.

answered Sep 15 '16 at 16:31

serraosays

7,163
3
35
60

In this case it's not working – Julian Sep 15 '16 at 16:44

score 3 · Accepted Answer · answered Sep 15 '16 at 16:43

Try this

Check example at CODEPEN

CSS:

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.row > [class*='col-'] img {
  align-self: center;
}

Lahar Shah · Answer 3 · 2016-09-15T18:35:47.993

You also need to make sure that parent div of that image has height greater than image height.

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.row > [class*='col-'] img {
  align-self: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  
</head>
<body>
    <div class="container">
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
            <div class="col-xs-6">
                some text<br />
                some text<br />
                some text<br />
                some text<br />
            </div>
        </div>
        <div class="row" style="border:1px solid red;">
            <div class="col-xs-6 different-height-1" style="border:1px solid green;">
                <img class="img-responsive" src="http://placehold.it/350x150">
            </div>
            <div class="col-xs-6 different-height-2" style="border:1px solid green;">
              <img class="img-responsive" src="http://placehold.it/200x100">
            </div>
        </div>
    </div>
</body>
</html>

You put min height, but I do not know event a min height. Your second image is not vertically aligned inside the row. — Julian, Sep 15 '16 at 16:53
I tried to make it aligned middle with respect to col. but other answer solved it.. Just tried and edited mine with that.. — Lahar Shah, Sep 15 '16 at 18:38

score 0 · Answer 4 · answered Sep 15 '16 at 16:43

You have to go against bootstrap styling but than it works

.img_container {
  position: relative;
}
.reset_pos {
  position: static !important;
}
.center {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row" style="border:1px solid red;">
      <div class="col-xs-6">
        some text
        <br />some text
        <br />some text
        <br />some text
        <br />
      </div>
      <div class="col-xs-6">
        some text
        <br />some text
        <br />some text
        <br />some text
        <br />
      </div>
    </div>
    <div class="row img_container" style="border:1px solid red;">
      <div class="col-xs-6">
        <img src="http://placehold.it/350x150">
      </div>
      <div class="col-xs-6 container reset_pos">
        <img class="img  center" src="http://placehold.it/200x100">
      </div>
    </div>
  </div>
</body>

</html>

Thank you but in this case a column with an image in not responsive. — Julian, Sep 15 '16 at 16:58

Vertical alignment of an image in a Twitter Bootstrap cell (height is unknown)

4 Answers4