HTML and CSS Reference
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.
W e've go t som e
pa dding here, and
at the botto m
a nd lef t…
Wait just a sec…why does the
text-align property affect the
alignment of the images? Shouldn't
it align only text? Seems like it
should be called something else if it
aligns images too.
Good point…it doesn't seem right, does it? But the truth
is that text-align will align all the 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> ).