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

Posted by William Newell
William Newell
1,482 Points

using text align for divs

hi

I have a parent container.

Width 80%

I have two images inside container with class left and right applied.

I want to place left image to left edge of container and right image to right edge.

I can do this no problem using float left and right but I prefer to use text align left and right.

I have applied to my classes inline-block ( I have also tried Inline ) so as to use text align but images won't budge. I have also made parent container inline block so I can apply text align to children but once I apply inline block to parent container it jumps from centre position and aligns to the left.

div.pic-container { max-width: 80%; margin: auto; }

.left {}

.right {}

Can I sort this out with out using floats.

2 Answers

William Newell
William Newell
1,482 Points

Hi Jennifer

Thanks for reply.

I take it the div is a block element.

If I place images in divs can I use text align properties?

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Text-align is a property on a parent container that gets applied to its content elements. So in your case you can't use that property on the div because both pictures will end up aligned the same way. You'll either have to use floats (as you already did) or position them absolute.