Forum Moderators: open

Message Too Old, No Replies

ABSMIDDLE replacement?

Anyone?

         

KMxRetro

1:30 pm on Feb 1, 2003 (gmt 0)

10+ Year Member



Hi all,
I use the <img src="lalal.gif" align="ABSMIDDLE"> tag a lot and when I run it through a validator, I get told that ABSMIDDLE is not valid HTML, or will not work in some browsers.

Is there a CSS alternative or alternative command that I could use, that would pass validation?

Thanks,

Birdman

2:02 pm on Feb 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The only thing I can think of is placing the img in a div and then vertical align a <p> in the div:

<div>
<img src="/path/" alt="" />
<p style="vertical-align: middle">Your text.....</p>
</div>

Keep in mind if you float the image left or right, your text will probably go to the top. There is a work-around, though.

Also, I would put the style in the head or external stylesheet. I put it inline in this example to keep it simple.

KMxRetro

2:38 pm on Feb 1, 2003 (gmt 0)

10+ Year Member



Would <img src="lalal.gif" style="vertical-align: middle"> not work?

I would check it out myself, but I am at work without my testing server. :)

Birdman

2:41 pm on Feb 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't think it will do what you are looking for. You want a string of text to originate at the middle of the image, right?

Applying vertical-align to the image will position the image itself, not the text.

DrDoc

6:52 pm on Feb 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Different browsers treat
middle
differently. And, vertical-align:middle in the img tag should work .. since it doesn't matter if the image is positioned or the text. If it's only one line of text it will have basically the same effect.

However, if absolute "middle" is required, I would suggest two DIV's or SPAN's with the same height .. Set vertical-align:middle for both SPAN tags (not for the image itself)

Another little thought .. If the image has the same height as the text there is a better solution. Use this in the image tag:

vertical-align:top;
margin-top:1px;

You might have to play around with the margin .. but at least it will look the same in all browsers.