Sat, 2004-10-16 17:12
Hi.
I'm making a complicated job of a very simple thing!
I want to align some text in the middle of a div, both horizontally and vertically. I am using text-align: center and vertical-align: middle.
The text-align: center is working fine, however the vertical-align: middle doesn't seem to do anything.
I have managed to get the vertical alignment working by placing a div inside a div, such that the inner div has margin-top: 40% specified (I chose 40% because of the size of the test font that I'm using).
I can concieve of a horrendously complicated mechanism in PHP that would keep the text vertically exactly centrally aligned depending upon the size of the font and the number of lines onto which the string is wrapped within the div, however I'm convinced that this is severe overkill and that there is a much simpler way of doing it which I don't know about!
Please help!
TIA, Mike.
Sat, 2004-10-16 18:17
#1
{vertical-align: middle} confusion
vertical-align is not the equivalent of the HTML valign. It aligns inline elements relative to other inline elements, not text within block elements.
You could try enclosing your text within a div that is then centred like this >
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
HTH 
Sat, 2004-10-16 18:28
#2
{vertical-align: middle} confusion
Joy!
Ta.
Sat, 2004-10-16 18:50
#3
{vertical-align: middle} confusion
...anything for a fellow php hacker 
Sun, 2004-10-17 16:31
#4
Figured it out!
Thanks for your help roy - and your comment on valign - I've figured out how to do it using a table "fiddle" within a div, like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Playing Around</title>
<style type="text/css">
.style2 {
font-family: arial;
text-align: center;
font-size: 20px;
background: lightblue;
color: red}
.style3 {background: red}
</style>
</head>
<body>
<div class=style3 style="
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px">
<table class=style2 style="
position: absolute;
top: 5px;
left: 5px;
width: 190px;
height: 190px">
<tr valign=middle>
<td>Multiple Style Test
</tr>
</table>
</div>
</div>
</body>
</html>
Heh!
Sun, 2004-10-17 17:12
#5
{vertical-align: middle} confusion
Mike - To say that you're over-complicating things is an understatement, and your mark-up has a few holes that crashed my browser! Either you're going to use tables for positioning, or you're not. There's no point mixing them like this; you might just as well just work in tables full-stop!
Table-less design is good for 'clean an' lean' coding, which means that it's good for accessibility and separating out content from layout. You're defeating the object of the exercise here.
And one other thing that might help you: you don't have to separate out your CSS text styling and box control - put it all in the stylesheet (unless you're scripting the box control on the fly to suit dynamic content).
HTH
Sun, 2004-10-17 18:11
#6
{vertical-align: middle} confusion
I've only just started doing this stuff, so I'm bound to tie myself up in knots untill I learn the right way! I am doing on-the-fly DIV re-sizing though.
I'm a bit worried when you say it crashed your browser. How so?
Sun, 2004-10-17 18:33
#7
{vertical-align: middle} confusion
mlse wrote:
I'm a bit worried when you say it crashed your browser. How so?
...I don't know; maybe the lack of a closing </td> tag; or the extra closing </div> tag; or the lack of quotes on the style names; or the lack of various other <head> data - who knows!
Sun, 2004-10-17 19:34
#8
{vertical-align: middle} confusion
I made a couple of pages to do vertical centering methods for divs and tables:
http://www3.ns.sympatico.ca/d.elliott/vertical_center.html and
http://www3.ns.sympatico.ca/d.elliott/vertical_center_table.html
You may find them helpful.
DE
Mon, 2004-10-18 20:15
#9
{vertical-align: middle} confusion
Thanks to both of you!
I am learning ...
Mon, 2004-10-18 21:03
#10
{vertical-align: middle} confusion
Yes thanks DE - I'm learning too