CODEWITHSUNDEEP
htmlcss
Jack Averill
Jack Averill

Reputation: 841

I can't get the logo to center vertically in my header

This seems like it should be a lot simpler, however I've tried a looking at a few other answers to previous similar questions and haven't managed to get anywhere.

I've been trying to use CSS to get my logo and an inline-block unordered list to float vertically in my header.

On the logo I tried 

vertical-align: middle;

which didn't do anything, and I also tried:

top: 50%;
transform: translateY(-50%);
-webkit-transform: translateX(-50%);

which sent both of the items to the very top of the header, halfway off the screen.

I tried the second rule on the unordered list as well and that made both items move to the left of the screen.

Really not sure what's going on, but I was hoping to find a solution that means they remain vertically centred if I adjust the height of the header, as I'll be using this template / wordpress theme in the future for other sites and it will make my life easier in the future.

My CSS is:

.header {
width: 75%;
height: 100px;
margin: 0 auto; 
}

img.standard.logo { 
position: relative;
float: left;
height: 40px;
width: 360px; 
}

.header nav ul{
display:block;
float:right;
padding:0;
margin-top:12px;
margin-bottom:0px;
list-style:none; 
}

Upvotes: 0

Views: 70

Answers (2)

Maihan Nijat
Maihan Nijat

Reputation: 9334

The simple solution would be to push it by margin-top:

img.standard.logo {
   margin-top: 30px;
}

Upvotes: 1

Fernando Salas
Fernando Salas

Reputation: 406

There are many ways to do this:

  1. If your logo image and header will continue to have fix heights you can just add a margin-top to hard-center it.

  2. I like to use this when I need to vertically center something:

    .parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

  3. Flexbox

There are a lot of different solutions. Use the one that works best for you and you co-workers.

Upvotes: 0

Related Questions