Structure: Using CSS to work with images and color in html documents

vertical-align

This property sets the position of images and text, relative to the text baseline

It is used with inline elements, including "replaced elements" such as images that are made into inline elements

It can be used to create subscript and superscript text

It takes six keyword values:

• baseline: aligns the baseline of the child element with that of the parent element

  Here's an example aligned to the baseline:

• sub: the child element takes the subscript setting of the parent font

  Here's an example to the subscript setting:

• super: the child element takes the superscript setting of the parent font

  Here's an example aligned to the superscript setting:

• text-top: aligns the baseline of the child with the top of the parent's tallest letter

  Here's an example aligned to the texttop:

• middle: aligns the vertical midpoint of the child with the top of the parent's baseline plus half the x-height of the parent

  Here's an example aligned to the vertical midpoint:

• text-bottom: aligns the bottom of the child with bottom of the parent's font

And here's an example aligned to the text-bottom:

The markup looks like this:

The reason for adding the smaller font-size is to make the sub- and super-script smaller than the parent text

The value can also be set with percentages, which raise and lower the child element a percentage of the parent element's line height

The markup looks like this:

Here's the positive vertical alignment

Here it is with an image:

Here's the negative vertical alignment

Here it is with an image:

replaced elements

This term refers elements that can be used to place non-textual elements in the page

These elements come from an external source

• img: images
• object: animations, audio, video, programs
• input
• select
• textarea

CSS treats these replaced elements in the same way - each has an intrinsic size and, to the browser, the content is irrelevant

This leaves only the size and the border area for CSS manipulation of images

There are three options for dealing with replaced elements:

• Put a background color or image behind the element
• Place it inline or let it remain a block element with line breaks before and after
• Change its size in horizontal and vertical directions

This can be done independently or with the two sides changing proportionally to each other

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssimages.html
Last updated 3.15.06 - H. Rosenbaum