Search code examples
csscentergraphical-logoimpresspages

How to center an image .logo via css?

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 { }
Solution

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