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

Posted by Nas Jones
Nas Jones
7,849 Points

Project help

https://w.trhou.se/qkw7o57lfq ... This is my project im working on https://w.trhou.se/0i08gmpw0c ... This is guils example project done in the course.

If you look at mine the "WHY NOT?" part i want it to resemble guils check out the wildlife box, Just not the border and shadow insets. My box is all the way to the left and not in the center like his i dont know why could it be because of the floats?. Also, for the rest of the code, is there anything i can do better? I'm not done with it.

1 Answer

Ryan Beck
Ryan Beck
3,826 Points
Ryan Beck
Ryan Beck
3,826 Points

Adding margin: auto; to your info class will centre the content within the div.

Nas Jones
Nas Jones
7,849 Points

Thanks for the help it worked!. Is that the way to center things?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Usually in centering it is combined with the display: block property and using relative positioning in CSS. And where you use relative position that means relative in position to the parent of that element.

For example you would do something like this.

<div class="relative-container">

    <img src="img" />

</div>

.relative-container {
    position: relative: 
    width: 100%;
}

.relative-container  img {

    display: block;
    margin: 0 auto;
}

This has the effect of centering your element because what it's doing is forcing the browser to apply automatic margin values to the left and right of the element. They're kind of like buffers, squeezing the element in place. It does have a disadvantage of forcing elements below so you can't put more elements side by side, so you'd have to use another technique.

So there's margin: 0 auto or text-align: center; if you want to centrally align the content of elements.