Centering Images
If you want to center an image, wrap a div element around the img element first. This technique is required because an img element, like em and strong, is inline. It rests in
the flow of the web page instead of marking off space like the p or blockquote blocklevel
elements do. The markup looks like this:
‹div class="flagicon"›‹img src="flag.gif" alt="Flag" width="160" height="60" /›‹/div›
And the CSS rule looks like this:
.flagicon {
text-align: center;
}
To center elements with fixed widths, such as images, first set the value of the parent’s
padding-left property to 50%. Then determine half of the width of the element
you are centering and set it as a negative value in the margin-left property. That prevents
the element’s left side from resting on the 50% line caused by its padding and
makes it slide into the middle of the page. The markup for an image in a web page
using this technique looks something like this:
‹img src="wolf.jpg" width="256" height="192" alt="Photo of wolf."›
The CSS rule to produce the result shown in the illustration below looks like this:
body {
padding-left: 50%;
}
img {
/* equal to the negative of half its width */
margin-left: -138px;
}
The image centered without the deprecated center element.
With the element centered horizontally, you can take this technique one step further
and center the image (or any other element) vertically as well. The difference with
this method is that it uses the position property to make this work. The markup is
the same as that used for the image element in the previous example, but this time
the CSS rule is for just one selector (see below):
img {
position: absolute;
top: 50%;
left: 50%;
margin-top: -96px;
margin-left: -138px;
height: 192px;
width: 256px;
}
The image centered horizontally and vertically on the web page.
With absolute positioning, you take the element out of the normal flow of the document
and place it wherever you want. If you want to center both text and an image (or other images) instead of just one image, enclose all the content with a div element:
‹div id="centerFrame"›
‹p>Epsum factorial non deposit quid pro quo hic escorol. Olypian
quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus
carborundum e pluribus unum. Defacto lingo est igpay atinlay.‹/p›
‹img src="wolf.jpg" width="256" height="192" alt="Photo of
wolf." /›
‹/div›
Then in the CSS rule, remove the height property and adjust the negative value of
the top margin to compensate for the additional elements on the page:
#centerFrame {
position: absolute;
top: 50%;
left: 50%;
/* adjust negative value until content is centered */
margin-top: -150px;
margin-left: -138px;
width: 256px;
}
Keep the amount of content that you want centered short. If you have numerous
images and long amounts of HTML text, users with small resolutions will have to
scroll the page to see your centered content.
Setting a Background Image
You want a background image that doesn’t repeat, use the background-image and background-repeat properties to control the display of an image (see below):
body {
background-image: url(bkgd.jpg);
background-repeat: no-repeat;
}
The background image displayed once in the upper left corner.
You can place text and other inline images over a background image to create a sense
of depth on a web page. Also, you can provide a framing device for the web page by
tiling a background image along the sides of a web browser.
Creating a Line of Background Images
To tile the background image horizontally, or along the x axis, use the following CSS
rule (see illustration below):
body {
background-image: url(bkgd.jpg);
background-repeat: repeat-x;
}
The background image tiled horizontally.
To have the background image repeat along the vertical axis, use the repeat-y value
for background-repeat.
|
