Test driving the new styles

Now it’s time to add those new properties to your “lounge.css” file and reload the page. Let’s check out the changes: the headings, the images, and the text are all centered in the <div> and have a little more breathing room now that there’s some padding in place. We’ve also got a little decoration at the top with the tiled cocktail image.

Good point... it doesn’t seem right, does it? But the truth is that text-align will align all inline content in a block element. So in this case, we’re setting the property on the <div> block element and all its inline content is nicely centered as a result. Just remember that text-align, despite its name, works on any kind of inline element. One other thing to keep in mind: the text-align property should be set on block elements only. It has no effect if it’s used directly on inline elements (like <img>).