Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Matthew Barnes
PLUS
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,266 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

Thank you Jeff for the quick solution.

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