10 replies [Last post]
mlse
Offline
newbie
Last seen: 15 years 4 weeks ago
Joined: 2004-10-16
Posts: 7
Points: 0

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.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

{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 Smile

Life's a b*tch and then you die!

mlse
Offline
newbie
Last seen: 15 years 4 weeks ago
Joined: 2004-10-16
Posts: 7
Points: 0

{vertical-align: middle} confusion

Joy!

Laughing out loud Laughing out loud Laughing out loud

Ta.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

{vertical-align: middle} confusion

...anything for a fellow php hacker Wink

Life's a b*tch and then you die!

mlse
Offline
newbie
Last seen: 15 years 4 weeks ago
Joined: 2004-10-16
Posts: 7
Points: 0

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! Laughing out loud

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

{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 Smile

Life's a b*tch and then you die!

mlse
Offline
newbie
Last seen: 15 years 4 weeks ago
Joined: 2004-10-16
Posts: 7
Points: 0

{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?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

{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!

Life's a b*tch and then you die!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 27 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

{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

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

mlse
Offline
newbie
Last seen: 15 years 4 weeks ago
Joined: 2004-10-16
Posts: 7
Points: 0

{vertical-align: middle} confusion

Thanks to both of you!

I am learning ...

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 6 years 16 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

{vertical-align: middle} confusion

Yes thanks DE - I'm learning too Smile

Life's a b*tch and then you die!