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

Aleksandra Agosto
Aleksandra Agosto
2,125 Points

How to center 2 divs on a page?

http://codepen.io/anon/pen/EblmK

So in my footer I have 2 divs next to each other and want to center them both (horizontally). I tried the using margin-left: auto; and margin-right: auto; but nothing happened. What should I do?

4 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Here is the CSS code for your footer that I have done:

/*******************************************
 FOOTER
 *******************************************/
.center {
   text-align: center;  
}

.info, .connect {
    display: inline-block;
    border: dashed;
}

.info {
   vertical-align: middle;
}

.connect {
   vertical-align: middle;

}

Try it and see if that is what you are wanting.

Ken Alger
Ken Alger
Treehouse Teacher

If the .info and .connect classes aren't aligning vertically the way you want, you can change that value. That's why I separated them out.

Aleksandra Agosto
Aleksandra Agosto
2,125 Points

oh my god, yes! That's exactly what I wanted to do! Definitely took some notes down for future reference. Thank you!

Ken Alger
Ken Alger
Treehouse Teacher

Aleksandra;

Pleased it worked out.

Happy coding,

Ken

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Aleksandra;

You could wrap both divs in another div with a class of, say, center. Then in the css apply a text-align: center to the center class.

    <footer>
        <div class="center">
        <div class="info">
            New Jersey Astronomical Association<br>
            The Paul Robinson Observatory<br>
            P.O. Box 214<br>
            High Bridge, New Jersey 08829-0214<br><br>

            From Memorial Day to October 31st, we are open:<br>
            Every Saturday evening from 8:30 PM to 10:30PM<br>
            Every Sunday afternoon from 2:00PM to 5:00PM<br>
            Please Review <a href="#">Calendar</a> for Specific Dates.

        </div>

        <div class="connect">
            <a href="#">Join our Mailing List!</a><br><br>
            <a href="#"><img src=http://www.amnh.org/extension/amnh/design/amnh_user/images/youtube.png></a>
        </div>
      </div>
  </footer>
.center {
   text-align: center;
   display: inline-block;
}

Is that what you are trying to accomplish?

Happy coding,

Ken

Hugo Paz
Hugo Paz
15,620 Points

Just to add something here. If you want both divs to remain next to each other you need to set them to

.center div{
display:inline-block;
}
Aleksandra Agosto
Aleksandra Agosto
2,125 Points

Thank you, but that didn't work. Nothing happened to the footer. I updated it in codepen so you can see. Maybe I did it wrong?

Blayne Holland
Blayne Holland
18,817 Points

Wrap the two <div> with another <div>. Then {margin: 0 auto} that div.

Aleksandra Agosto
Aleksandra Agosto
2,125 Points

sorry, but that didn't work :/

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Aleksandra;

Take out the float-left for the info class.

Ken

Aleksandra Agosto
Aleksandra Agosto
2,125 Points

nope, when I removed float left, it just misaligned the divs. Doesn't center.