Center Image Vertically in Parent Row

Question

I am attempting to center an image vertically inside of a parent fluid container.

Here is a fiddle that outlines the problem.

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2 col-sm-4 col-xs-4 col-xxs-4">
        <div class="">
          <a href="#"><img id="logo" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here"/></a>
        </div>
      </div>
      <div class="col-md-10 col-sm-8 col-xs-8 col-xxs-8">
        <div class="row">
          <div class="col-md-12">
            <div class="">
              <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" style="color: #1B75BB;">Search</a>
                    </li>
                    <li><a href="#" style="color: #1B75BB;">Archives</a>
                    </li>
                    <li><a href="#" style="color: #1B75BB;">About</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
          </div>
        </div>
      </div>

As you can see, the image is centered horizontally, but not vertically. Doing things like setting the margin, even of the parent container, does not seem to work. This feels like it should be fairly simple to solve, but I am struggling with it.

the jsfiddle code doesn't seem to bear any relationship to the code in the question. Did you get the fiddle URL wrong? — Simba, Jul 21 '15 at 14:55
Vertically centering elements has always kinda been a pain, but did you do a google search? In my experience, using a "pusher element" works wonders! — BillyNate, Jul 21 '15 at 15:06
https://jsfiddle.net/DTcHh/10247/ - Sorry about the fiddle, this is updated! Thanks BillyNate, I had searched, but never seen a pusher element. I will look into it now. — Archetype90, Jul 21 '15 at 15:15
it wont align verticly when it has wrappers the same height as it. — DCdaz, Jul 21 '15 at 15:25

score 1 · Answer 1 · answered Jul 21 '15 at 15:28

There are two ways of centring elements vertically within other elements, both of them are dependent upon styles of the parent container. One is to set the line height the same as the container height, and the other is to use table cells:

img {
  height: 25px;
  width: 25px:
}
.container {
  height: 50px;
  width: 50px;  
  text-align: center;
  border:1px solid;
}
.one {
  line-height: 50px; /* Same as container height */
}
.container.two {
  display:table-cell;
  vertical-align:middle;
}

<div class="container one">
  <a href="#">
    <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" />
  </a>
</div>
<br />
<div class="container two">
  <a href="#">
    <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" />
  </a>
</div>

score 1 · Answer 2 · answered Jul 22 '15 at 11:26

I have done this in a different way by making the 'a' have a background image and matching the height https://jsfiddle.net/tonytansley/gu8b6yxk/1/

#logo { 
    margin: 0 auto;
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q');
    display: inline-block;
    width: 100%;
    height: 52px;
    max-height: 100%;
    background-size: 45px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

And then taking the image out of the 'a' tag

<a href="#" id="logo"></a>

score 0 · Answer 3 · edited May 23 '17 at 12:14

What about this? Just give the outer div a class of imagecontainer, use a helper-class with display: inline-block; and give this attribute to the img next to it, too, so it gets vertically centered next to the span.

HTML:

<div class="container-fluid">
    <div class="row">
      <div class="col-md-2 col-sm-4 col-xs-4 col-xxs-4">
        <div class="imagecontainer">
            <span class="helper"></span>
            <a href="#"><img id="logo" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" alt="logo here"/></a>
        </div>
      </div>
      <div class="col-md-10 col-sm-8 col-xs-8 col-xxs-8">
        <div class="row">
          <div class="col-md-12">
            <div class="">
              <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" style="color: #1B75BB;">Search</a>
                    </li>
                    <li><a href="#" style="color: #1B75BB;">Archives</a>
                    </li>
                    <li><a href="#" style="color: #1B75BB;">About</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
          </div>
        </div>
      </div>

CSS:

.imagecontainer {
    height: 25px;
    white-space: nowrap;
    text-align: center;
    margin: 1em 0;
}
.img-responsive {
    vertical-align: middle;
    height: 25px;
    display: inline-block
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

https://jsfiddle.net/DTcHh/10286/

Answer was gracefully adapted from How to vertically align an image inside div

This is great, almost exactly what I am looking for. The only problem that I see is that it is for a fixed height. Since the image is responsive, the height is constantly changing. Is it possible to adapt this with a variable height? (I am playing around with it now trying to accomplish this). The image that I gave as the logo in the fiddle was just an example. — Archetype90, Jul 21 '15 at 16:05
Well, its only easy when your row stays the same height. remove padding from imagecontainer and set height to your menu-height 52px. look here: https://jsfiddle.net/DTcHh/10286/ — cari, Jul 22 '15 at 10:58

Center Image Vertically in Parent Row

3 Answers3