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

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

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 4

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