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.
Aleksandra Agosto
2,125 PointsHow 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
Treehouse TeacherHere 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
Treehouse TeacherAleksandra;
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
15,620 PointsJust 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
2,125 PointsThank 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
18,817 PointsWrap the two <div> with another <div>. Then {margin: 0 auto} that div.
Aleksandra Agosto
2,125 Pointssorry, but that didn't work :/
Ken Alger
Treehouse TeacherAleksandra;
Take out the float-left for the info class.
Ken
Aleksandra Agosto
2,125 Pointsnope, when I removed float left, it just misaligned the divs. Doesn't center.
Ken Alger
Treehouse TeacherKen Alger
Treehouse TeacherIf 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
2,125 PointsAleksandra Agosto
2,125 Pointsoh my god, yes! That's exactly what I wanted to do! Definitely took some notes down for future reference. Thank you!
Ken Alger
Treehouse TeacherKen Alger
Treehouse TeacherAleksandra;
Pleased it worked out.
Happy coding,
Ken