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.

Thanks
LVL 1
borbAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eric AKA NetminderCommented:
<img src="x.gif" align "middle">
0
dmaryakhCommented:
That should probably read:
<img src="x.gif" align="middle">
0
borbAuthor Commented:
ericpete,

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 ???
0
dmaryakhCommented:
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
http://www.w3.org/TR/REC-CSS1
-----------------------------
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:

'baseline'
align the baseline of the element (or the bottom, if the element doesn't have a baseline) with the baseline of the parent
'middle'
align the vertical midpoint of the element (typically an image) with the baseline plus half the x-height of the parent
'sub'
subscript the element
'super'
superscript the element
'text-top'
align the top of the element with the top of the parent element's font
'text-bottom'
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:

'top'
align the top of the element with the tallest element on the line
'bottom'
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.