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