Search code examples
htmlcssvertical-alignment

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

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?

enter image description here

Solution

  • 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;
}