Hi,
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
parentNode.offsetHeight/2-offsetHeight/2
With IE we can directly code that with css style using
top:expression(formula)
With NS, I don't know to do that with css so I use a script and the result
is :
<html>
<head>
<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;
cursor:pointer
}
div {
position:relative;
top:expression(parentNode.offsetHeight/2-offsetHeight/2);
text-align: center;
border:1px solid #669900;
height:30px;
display:block
}
-->
</style>
<script language="javascript">
function init(){
for (i=0;i<document.getElementsByTagName('div').length ;i++){
document.getElementsByTagName('div')[i].style.top=((document.getElementsByTa
gName('div')[i].parentNode.offsetHeight/2-document.getElementsByTagName('div
')[i].offsetHeight/2)+"px");
}
}
</script>
</head>
<body onload="init();">
<input type="button" id="exec" value="Execute" onclick="execonclick()">
<input type="text" id="exectxt"
value="document.getElementsByTagName('div')[1].style.top='30px'"
size=100><br>
<input type="button" id="alert" value="Alert" onclick="alertonclick()">
<input type="text" id="alerttxt" value="" size = 100><br>
<br><br><br><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()" >
</body>
<script language="javascript">
//------------
function execonclick() {
eval (document.getElementById("exectxt").value);
}
//------------
function alertonclick() {
alert (eval (document.getElementById("alerttxt").value));
}
// -------
</script>
</html>
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">
<tr>
<td >Menu1 word1 word2</td><td>Menu2 word1111 word2222222</td>
<tr>
</table>
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
word2</div>
<div style="height:100%;float:left;border:1px solid yellow">Menu2 word1111
word2222222</div>
</div>
I succeed to find a solution for the first TD property. I have two others to
solve!
Thanks for any help for the two last properties.
