How to align an image and text vertically in the middle?

Question

I have a DIV at the top and a few anchors. First is styled with a logo and the rest are text. The styles I've set are as follows.

div.nav-top {
  height: 120px;
  vertical-align: middle;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  width: 200px;
  height: 40px;
  display: inline-block;
}

a.nav-link {
  vertical-align: middle;
}

However, these elements are not centered in the div. The alignment seems to follow the image, which is at the top. The text gets in the middle relative to the image. It's not a bad idea but I need the whole system img-a-a-a-a to be centered vertically. At the moment I pad it but as soon as the height of the outer DIV changes, everything breaks.

What am I doing wrong?

(I've found this post but here they apply tables and such. Doesn't seem like the most appropriate solution. Perhaps I'm mistaken?

Answer 1

You can refer to this blog, where the owner describes centering issues. He started 2001 but be aware that the last update's been made last summer, and I admire his persistence. He presents clear examples on how to center in the different versions of CSS.

In your case, I'd suggest that you use display: flex like so. Note that the whole centering magic's done from the containing control and imposed on the underlying children. There's actually no need to style nav-link at all (see remark below the example, though).

div.nav-top {
  height: 120px;
  background-color: purple;
  padding: 10px;
  display: flex;
  align-items: center;
}

a.nav-logo {
  background: no-repeat url(Logo.png);
  background-size: 200px 40px;
  background-position: center center;
  width: 200px;
  height: 100%;
}

a.nav-link { }

That's a new thing in styling and recently implemented. The disadvantage of that is that older browsers might have problems rendering it. But the upside is that it's much more intuitive to the designers (and fetching a decent version of a browser is not a far reach, unless managed centrally by the corporate).

You might want to use margin for the anchor controls, as they're going to be squashed toghether. Also, the sizes and fonts will need adjusting. If you do that, you'll probably end up needing the style which I suggested wasn't needed but that's specifics only you're aware of.

a.nav-link {
  margin: 10px;
  font-size: 20px;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
}

Answer 2

Using Flexbox

nav, .menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
}

li {
  padding: 0 5px;
}

<nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

Using CSS Table

nav, .menu {
  display: table;
}

.logo, .menu {
  display: table-cell;
  vertical-align: middle;
}

li {
  padding: 0 15px;
  display: table-cell;
  vertical-align: middle;
}

<nav>
  <div class="logo">
    <img src="http://placehold.it/150x50">
  </div>
  
  <ul class="menu">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
  </ul>
</nav>

Answer 3

It's always a good practice to control height with paddings instead of a fixed height and margins to center. So, keeping that in mind:

• Wrap the div with the logo and the div with the anchortags as children of a container div.

• give the purple box there (or whatever it represents the corresponding padding top and bottom to center that parent div you created inside.

  .purple{
      background:purple;
      width:400px;
      display:inline-block;
      padding: 20px 15px;
      height:auto;
  }
  

EDIT

or, if you MUST have a fixed height on the parent;

    .purple{
        background:purple;
        width:400px;
        display:inline-block;
        height:60px;
        padding: 0px 15px;
    }

See this demo

Answer 4

You can wrap your elements into a div and use margin: 0, auto; for the elements and the inner container as well.