General Question

VoodooLogic's avatar

<img> attribute question.

Asked by VoodooLogic (729points) April 3rd, 2008

How do I change the position of an image in relation to the text? By default the bottom of the image and the bottom of the text are aligned. However, I’d like to know the code to have the img centered on the line.
[shameless] This is for my T-Shirt idea I’ve posted on my blog [/shameless]
Trying to get it approved the the rugby team’s board of directors.

Observing members: 0 Composing members: 0

3 Answers

paulc's avatar

Usually you use the “align” attribute set to “middle”. There is an unofficial value “absmiddle” which works more the way you’d expect “middle” to (exactly centers it to the current line of text) but some might complain to you that it isn’t valid HTML.

<img align=“middle” src=“path/to/image.ext” />
<img align=“absmiddle” src=“path/to/image.ext” />

Just off the top of my head: you could set the “line-height” CSS property for that text to be equal to the height of the image. That might be another way to do it but I’d have to test it out to be sure.

p { line-height: 40px; }

VoodooLogic's avatar

I think that did it. Conceptually, we’re good to go. Thanks.

Vincentt's avatar

If you’d want to do it in CSS (which you should ;-), I think the vertical-align property (for once) comes in handy.

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther