HTML and CSS Reference
In-Depth Information
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>
).
