aligning text and graphics

If I have, for example:
<IMG SRC="x.gif>, and some text STRAIGHT
after, how do I get the graphic centered with the text.

The text element sits at the bottom.

I have a huge HTML book, but couldn't
find this most basic (probably) thing, and am too tired too hunt for it.

This thing has been at the back of my mind for ages, so thought I'd ask you guys - and get a quick, precise answer.

Who is Participating?
dmaryakhConnect With a Mentor Commented:
well it actually centers the graphics and the text by the texts' baseline, so it will appear sligtly above the middle of the graphic. You might try to add some white space to the bottom of your graphic, so when aligned, text appears in the middle, however that will depend on the size of the text. I think you can do it with style sheets by setting vertical-align property of your text to the middle

Sniped from CSS1 recomendation
5.4.4   'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial: baseline
Applies to: inline elements
Inherited: no
Percentage values: refer to the 'line-height' of the element itself

The property affects the vertical positioning of the element. One set of keywords is relative to the parent element:

align the baseline of the element (or the bottom, if the element doesn't have a baseline) with the baseline of the parent
align the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent
subscript the element
superscript the element
align the top of the element with the top of the parent element's font
align the bottom of the element with the bottom of the parent element's font
Another set of properties are relative to the formatted line that the element is a part of:

align the top of the element with the tallest element on the line
align the bottom of the element with the lowest element on the line
Using the 'top' and 'bottom' alignment, unsolvable situations can occur where element dependencies form a loop.

Percentage values refer to the value of the 'line-height' property of the element itself. They raise the baseline of the element (or the bottom, if it has no baseline) the specified amount above the baseline of the parent. Negative values are possible. E.g., a value of '-100%' will lower the element so that the baseline of the element ends up where the baseline of the next line should have been. This allows precise control over the vertical position of elements (such as images that are used in place of letters) that don't have a baseline.

It is expected that a future version of CSS will allow <length> as a value on this property.
Eric AKA NetminderCommented:
<img src="x.gif" align "middle">
That should probably read:
<img src="x.gif" align="middle">
borbAuthor Commented:

I did actually try that (tried align=
"center" first - saw it wasn't correct),
and align="middle" sets the text slightly above the middle??

The graphic fills the whole area - I
have a circle, with a number centered
perfectly in the circle.

Any clues ???
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.