471,831 Members | 1,601 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,831 software developers and data experts.

DIV text vertical-align solution

Up to now, I didn't find a solution to align text in the middle of a inline
neither block box in the vertical direction. That's because the
vertical-align property is not active for many boxes.
And when it is, not all the browsers folow it.
I think there is a general solution in surrounding the box with another box,
using the top property and fixing the top position at the middle of the
surrounding box minus the half height of the box to place.The formula is

With IE we can directly code that with css style using
With NS, I don't know to do that with css so I use a script and the result
is :

<style type="text/css">
a { height:70px;width:100px;
font-family: arial;
font-size: 10px;
color: #6666FF;
text-decoration: none;
text-align: center;
float: left;
border: 2px solid #FF0000;
display: block;
div {
text-align: center;
border:1px solid #669900;
<script language="javascript">
function init(){
for (i=0;i<document.getElementsByTagName('div').length ;i++){

<body onload="init();">

<input type="button" id="exec" value="Execute" onclick="execonclick()">
<input type="text" id="exectxt"
<input type="button" id="alert" value="Alert" onclick="alertonclick()">
<input type="text" id="alerttxt" value="" size = 100><br>

<a href="http://www.google.com" target="_self" id="out1"><div >Go to Google
word4 word5</div></a>
<a href="http://www.yahoo.com" style="margin-left:20px" target="_self"
id="out2" ><div>Go to Yahoo word4 word5</div></a>
<br style="clear:left"><br><br><br>
<input type="button" value="Change Top" onclick="init()" >
<script language="javascript">
function execonclick() {
eval (document.getElementById("exectxt").value);
function alertonclick() {
alert (eval (document.getElementById("alerttxt").value));
// -------

I added my personal microdebugger to show how the top setting works.

I came to this problem because I want to use DIV instead of TABLE for
displaying an horizontal menu.
Try that
<table width="200px">
<td >Menu1 word1 word2</td><td>Menu2 word1111 word2222222</td>
The TABLE has three wonderful properties :
- the TD has a VALIGN property
- in case of many cells, the TD widths are automatically sized in order to
fill exactly the TABLE width
- Each TD wraps its text content, not only the last one in a row.
Compare to that
<div style="width:200px;height:100px;border:1px solid black" >
<div style="height:100%;float:left;border:1px solid green">Menu1 word1
<div style="height:100%;float:left;border:1px solid yellow">Menu2 word1111

I succeed to find a solution for the first TD property. I have two others to
Thanks for any help for the two last properties.
Jul 23 '05 #1
0 22459

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Mark Carroll | last post: by
reply views Thread by Stephen Muecke | last post: by
5 posts views Thread by Stan McCann | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.