Center this image?

[Stalin]

Hey DevBest.
I've had a major blank and now I'm confused. I have an image that I'm trying to center horizontally and this is what I have it as so far;

You must be registered for see links

This is the code I currently have:

.navbar{
    background-color:white;
    height:100px;
    border-bottom: 2px solid #CECECE;
}

#logo{
    background-image: url('/img/exophyte.png');
    background-repeat: no-repeat;
    height:75px;
}

Whenever I try using margin-top on the logo ID, it does this;

You must be registered for see links

Anyone have any ideas on how I can fix this so that the navbar stays in its position?
Thanks.

 

[Brackson]

#logo{
    background-image: url('/img/exophyte.png');
    background-repeat: no-repeat;
    height:75px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Best answer and a like?

 

[Stalin]

I just realised I accidentally wrote vertically instead of horizontally, I need it centered horizontally.

 

[IntactDev]

D

I just realised I accidentally wrote vertically instead of horizontally, I need it centered horizontally.

Did his answer work?

Regardless, I'm gonna tell you another work around. I usually make a shell for the logo, then I do the logo, that way it doesn't act up when you add margins and paddings.

 

[Heaplink]

You'll need to set a width for it, and use margin: 0 auto;

 

[Stalin]

Sorry, I did actually mean vertically. I've been getting confused lately between the two (don't ask me why, my head's all over the place at the moment).
This is what my logo div currently contains.

#logo{
    padding:10px;
    background-image: url('/img/exophyte.png');
    background-repeat: no-repeat;
    height:75px;
    width:286px;
    display:block;
    margin-left:100px;
    margin-top:30px;
}

With margin-top:30px; within it, it moves the entire navbar, instead of just the logo.

You must be registered for see links

 

[Stalin]

So, I got that all sorted. Thanks for all the help, I made a stupid mistake whilst editing the code which didn't allow it to move as I wished. I have another small problem with a navigator, it currently looks like this;

You must be registered for see links

but I want it to look like this;

You must be registered for see links

This is my current navbar code, which also acts as the header.

.navbar{
    background-color:#F1F1F1;
    height:100px;
    border-bottom: 2px solid #CECECE;
}

.navbar li{
    margin-left:10px;
    margin-right:10px;
    background-image:url('/assets/img/div.png');
}

.navbar ul{
    float:right;
    font-family:code;
    font-size:22px;
    color:#D3D3D3;
}