Image Alignment
Article ID: KB101175
Image alignment is a phrase used to describe the position of an image with
respect to other text or content.
Placing images into web pages is different from placing them into a standard
word processing or page layout program. With many word processing or page layout
programs, images can be placed almost anywhere on the page, with text flowing
around them, under them, or over them. This is not true with images in web
pages.
The default positioning of an image is on the same "line" as the rest of the
text around it. For example:
Here is a line of text that has been "pushed down" because the picture is
taller than the line. This is the "default" state of a picture that you place
into your page.
If
you want your text to flow around the image, you may specify the alignment of
the image to be "left" or "right." In this paragraph, you can see that the
picture "sticks" to the left side of the content area, and this paragraph (and
subsequent paragraphs) flows around it.
To change the alignment of an image, double-click on the picture and change
the alignment dropdown.
Alignment options:
- left - pushes picture to left, text flows to the right
- right - pushes picture to right, text flows around the left
- center - doesn't work for most browsers
- middle - sets the line of text to run along the middle of the image (see
below)
- texttop - sets the line of text to run along the top of the image (see
below)
- bottom - sets the line of text to run along the bottom of the image (see
below)
- absbottom - sets the bottom of the image to be even with the "absolute
bottom" of the line of text (see below)
This image has alignment set to middle:
Notice that the text runs along the middle of the image, and any text that
spills over to the next line will be below the image.
This image has alignment set to "texttop."
The text runs along the top of the image.
This image has alignment set to baseline. ("Bottom" produces the same effect.)
This means that the bottom of the image runs along the same line as the line of
text.
This image has alignment set to absbottom,
which sets the image to the absolute bottom of the line of text -- that is, to
the bottom of where "g," "p," and other "dangling" letters (as opposed to lining
it up with the bottoms of "m," "s," or "c").
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1043/kb101175.htm
permalink to this article:
http://www.pixelmill.com/support/kb101175.htm
Back to top