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 Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

Centering Figures on a page

Hello!

I have added figures to my html page. I have wrapped them in a class, but when I go to center using margins, only the text becomes center. The styled figure element stays to the right and does not center in the div.

Html code: https://w.trhou.se/its7r5g0x5

CSS using:

.content { clear: both; text-align: center; margin-left: auto; margin-right: auto; } figure { background-color: #4E1718; width: 40%; padding-bottom: 13%; padding-top: 2%; float: left; box-sizing: border-box; margin-right: 10px; margin-bottom: 10px; }

How can I center everything inside the class? Thank you!

Melissa Anselmo
Melissa Anselmo
3,236 Points

content { clear: both; text-align: center; margin-left: auto; margin-right: auto;

figure { background-color: #4E1718; width: 40%; padding-bottom: 13%; padding-top: 2%; float: left; box-sizing: border-box; margin-right: 10px; margin-bottom: 10px; }

A quick look and you're missing the } closing bracket after content. That could be causing the problem.

1 Answer

Roy Penrod
Roy Penrod
19,810 Points

Ok, you've got a few things going on.

First, your workspace doesn't contain a properly formatted html document. You need the doctype, html, head, and body tags. I know it still works in your browser just using the snippet you provided, but it's really bad form and you want to get out of that habit now.

Second, you are centering the div with the content class correctly. When you add a border to the .content class in your CSS and change it's width to 70%, you'll get a better picture of what's happening. Here's the code:

.content { 
    clear: both; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto;

    /* just for testing purposes */
    border: 1px solid red;    
    width: 70%;
}

Reload your page and you can see that the div with the content class is being centered, but that your figures are outside of the container. That's happening because you floated them to the left. Floating an element takes it out of the normal document flow. In this case, that's not the behavior you're wanting.

So here's the code to fix your issue. Here's the HTML:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css">

    </head>
    <body>

        <div class= "content">
            <h2>ALL PROJECTS</h2>
            <nav> All Editorial Digital Photography Mobile Identity</nav>
            <figure>Image 1<figcaption> Model S Catalog</figcaption></figure>
            <figure>Image 2<figcaption> Model S Catalog</figcaption></figure>
            <figure>Image 3<figcaption> Model S Catalog</figcaption></figure>
            <figure>Image 4<figcaption> Model S Catalog</figcaption></figure>  
        </div>

    </body>
</html>

The doctype, html, head, meta tag for the character set, and body tags are the barest HTML template you should get in the habit of using.

And here's the CSS:

.content { 
    clear: both; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto;
} 

figure { 
    display: inline-block;
    background-color: #4E1718; 
    width: 40%; 
    padding-bottom: 13%; 
    padding-top: 2%;    
    box-sizing: border-box; 
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

I removed your float from the figure element and replaced it with the display property set to inline-block.

An inline block element appears in the normal document flow so it's actually inside the content container you created. An inline block element also appears inline, so you can put several on the same line. The block part of inline block lets you keep more control over the height, width, padding, and margins.

I also replaced your margin-right property of 10px with a margin-left and margin-right of 5px. The margin-right property caused the figures to look a little off center because it added more whitespace to the right side of the figure.

Lindsay Barrett
.a{fill-rule:evenodd;}techdegree
Lindsay Barrett
Python Web Development Techdegree Student 7,357 Points

It worked John, thank you!