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: 12         


        

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