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 CSS Layout Techniques Display Modes Block vs. Inline Elements

Filippo D'Arrigo
Filippo D'Arrigo
5,285 Points
Posted by Filippo D'Arrigo
Filippo D'Arrigo
5,285 Points

Center with block property

Hi everyone! I aligned my main banner to the center of the page using inline-block and setting the width to 90% but I wonder if somehow it's possible to do the same using the block property.

 <div class="main-banner">
            <h1>This is the Main Banner Heading</h1>
            <p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
        </div>

```css

.main-banner {
   width:90%;
   background: #dfe2e4;
   text-align: center;
   padding: 30px 15px;
   display: inline-block;
   margin-top:20px;
   margin-bottom:20px;
    }

1 Answer

Marc Busby
Marc Busby
35,550 Points

Hi Filippo,

I believe the only way to center a block element is to set the margin to auto. Happy to be corrected on this but I'm pretty sure that's the way to do it.

display: block;
margin: auto;

Regards,