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
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,622 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
19,320 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