Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Style the Basic Elements

id selector

what is the code to put the logo in the center of the page

css/main.css
a { text-decoration: none;}
#wrapper {max-width: 940px} margin: 0 auto;}
#logo {text-align: centre;}

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points

Hi,

First things first there is a couple of errors in your code syntax.

  1. Before margin you have a } where it should be a ; in the #wrapper element.

  2. In text align you have used "centre" which is a correct spelling in english but CSS uses the american-english spelling "center".

It should be:

a {
text-decoration: none;
}

#wrapper {
max-width: 940px;
margin: 0 auto;
}

#logo {
text-align: center;
}

The code to centre logo can be done in a few different ways.

Here is a couple of examples:

1.

#logo{
margin: 0 auto;
}

This will create 0 margins on the top and bottom and automatic margins that fill the left and right side of the logo that will auto resize on page re-size.

In some scenerios the above will not give the desired look in more complicated designs as the margins will interfere with other elements, if so you could try the below to position the logo in the centre of the page.

2.

#logo{
position: absolute;
left: 50%;
}

This will give the element an absolute positioning rule which will allow the element to break the normal flow of the page. The "left: 50%" will position the element 50% from the left which will also update on page re-size due to it will always be 50% regardless of the fixed width of the page.

Hope this helps :)