valign div tags

kathm
kathm used Ask the Experts™
on
Hi,
I have a set of <div> tage which I am using combined with layers to create a drop down menu.
<DIV CLASS="TRS" ID="TRS" STYLE=" left: 282px; top:193px">
<DIV><A HREF="#" onMouseOver="show('',2,this)">Text 1</A></DIV>
<DIV><A HREF="#" onMouseOver="show('',2,this)">Text 2</A></DIV>
<DIV><A HREF="#" onMouseOver="show('',2,this)">Text 3</A></DIV>
</DIV>

My problem is that I cannot get the text withing the inner <div's> eg. Text 1, Text 2 or Text 3 to vertically align to the middle??
I have tried adding style="vertical-align: middle;" to the inner div tags and the outer one nothing seems to work???
Does anyone have any ideas???
Thanks, Kathryn

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Hi Kathryn

You basicly have two problems... the first one is that that the outer DIV will adjust itself to the size of whatever is in it. That way there will be no visible difference between something vertically aligned to the middle or not.

The other is that the div-tag doesn't support the vertical-align or the HTML equivalent VALIGN="middle".

This is one solution I came up with to solve this:
<DIV VALIGN=middle CLASS="TRS" ID="TRS" STYLE="left:282px;top:193px;">
<TABLE HEIGHT=123><TR><TD VAIGN="middle">
<DIV><A HREF="#" onMouseOver="show('',2,this)">Text 1</A></DIV>
<DIV><A HREF="#" onMouseOver="show('',2,this)">Text 2</A></DIV>
<DIV><A HREF="#" onMouseOver="show('',2,this)">Text 3</A></DIV>
</TR></TD></TABLE>
</DIV>

Notice that I set a fixed height for the table to force it to expand to a desired height so that you will see the affect of vertically aligning the text. Tables to adjust their size according to contence. If you want to specify a height/width for the div, add width:123px;height:456px to the STYLE of the div tag.

Hope this helps!
Regards,
MHQ
No comment has been added lately, so it's time to clean up this TA.
I will leave a recommendation in the Cleanup topic area that this question is:

- ACCEPT MHQ Grade A

Please leave any comments here within the next seven days.

PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

Jay Solomon
EE Cleanup Volunteer

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial