How to center an image .logo via css?

Question

I made over the content management a image as logo, I tried to center it in many ways, also replaced some floats before. its just impossible.

This is the untouched content of style.css from the exensivefree theme, i hope this was the right place at all:

header {
width:100%; 
margin:auto auto; 
z-index:101; 
padding:7px 0 12px 0; 
}

h1 {
display:inline-block; 
z-index:100;
}

.logo {
margin:25px 0px 10px 0;   
font-size: 24px; 
line-height:30px; 
font-weight: bold;
}

nav { }

If the logo has position:relative you can use margin:0 auto; — The One and Only ChemistryBlob, May 18 '14 at 23:25

score 0 · Accepted Answer · answered May 19 '14 at 01:03

You need to give the element a fixed width and set the margins to auto.

.logo {
  width:100px;
  margin: 0 auto;
}

This makes the browser calculate equal margins to the left and right of the element, and therefore placing it in the centre of the page.

How to center an image .logo via css?

1 Answers1