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

Matthew Barnes
PLUS
Matthew Barnes
Courses Plus Student 16,550 Points
Posted by Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points

Center two "a link" buttons in div?

Hi all,

Have been playing around with this for about half hour now. All I want to do is center two buttons I have created using an <a> tag, to the center of its container:

HTML: 

    <div class="header">
        <div class="left">
            <h1>Matt Barnes</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
            <div class="buttons">
                <a href="#" class="contactButton">Contact</a>
                <a href="#" class="portfolioButton">Portfolio</a>
            </div>    
        </div>
        <div class="right">
            <img src="img/Profile.png" alt="A profile photo of Matt Barnes">    
        </div>
    </div>

SCSS: 

    .buttons {
        width: 100%;
    }
    .contactButton {
        border-radius:4px;
        border:1px solid #4b8f29;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:Arial;
        font-size:18px;
        font-weight:bold;
        padding:8px 18px;
        text-decoration:none;
        text-shadow:0px 1px 0px #5b8a3c;
        margin: 20px auto;
    }

I thought setting the margin left/right to auto would do the job, but I have had no luck.

Basic layout of page: Div spanning entire width of browser with: Left: Information about myself (I would like all elements to be centered within) Right: An image

Thanks in advance!

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Since you're setting your buttons to display:inline-block, you can use text-align:center on the containing div (.buttons) to center the buttons on the page.

Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points
Matthew Barnes
Matthew Barnes
Courses Plus Student 16,550 Points

Thank you Jeff for the quick solution.

I was trying text-align: center on the a tags themselves! Mental block!