line-height alternative - vert centering

**gRoberts** · Oct 3, 2007 02:57

Hi all,

Does anyone have any way of vertically aligning some text or a list item without using the line-height?

My problem is the site is being built with % font values, which allows the user to change their font size via the browser.

Unfortunately, with this, the text with a line height set, will not remain in the same position.

The effect is similar to that of a table cell. if there is a height set on a table cell, and the vertical-align is set to middle. My text will be free to increase and decrease in size, whilst remaining vertically centered.

Any idea's?

Cheers

Gav

**gRoberts** · Oct 3, 2007 03:01

an example.. in your browser change the text-size or use CTRL and move your middle mouse wheel back and forth. Instead of the text being vertically centered, its moved up or down with the font size.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css">
            #test {
                height: 50px;
                width: 200px;
                text-align: center;
                border: solid 1px;
                font-size: 66&#37;;
                font-family: verdana, tahoma, sans-serif;
                line-height: 50px;
            }
        </style>
        <script type="text/javascript"></script>
    </head>
    <body>
        
        <div id="test">Some text</div>

    </body>
</html>

**Paul O'B** · Oct 3, 2007 03:04

Hi,

You may need to explain in what situation you mean exactly as setting the line-height in the following way will ensure that the line height drows with the text.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
p{
    border:1px solid #000;
    line-height:2em;
}


</style>
</head>
<body>
<p>This is a test This is a test</p>
</body>
</html>

Unless of course you have set the line height to an exact pixel height but I assume you wouldn't do anything so silly

.

**Paul O'B** · Oct 3, 2007 03:16

It looks like you did set a fixed pixel height so I'm not sure what you expect to happen as the pixel height can't change

The correct way would be to size the container and line-height in ems so that it all scales together.

Alternatively you could add display:table which will make it scale ok in Firefox. IE doesn't understand display:table but it doesn't look like it needs it anyway as the text stays centred.

**gRoberts** · Oct 3, 2007 04:11

its for a menu. The main container is 100% wide by 125px tall. I cannot have the main container height set to something like an em or percentage, as it needs to remain static. Although the UL element doesn't need to be any height as long as it appears correctly.

**Paul O'B** · Oct 3, 2007 04:49

as it needs to remain static.

You can't expect to resize text and then complain when a fixed height/width element doesn't keep track with it. This is your basic design error and you should have accommodated this in your design

.

There are plenty of ways of creating flexible menus that will expand with text resize but it does take more effort and has to be built in from the ground up.

If you have an example of your menu that we can look at then perhaps we could make some other suggestions but it sounds like your design concept is flawed in the first place and you may have to live with the consequences.

**Paul O'B** · Oct 3, 2007 04:57

As I said above you could do this for firefox:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
            #test {
                height: 50px;
                width: 200px;
                text-align: center;
                border: solid 1px;
                font-size: 66&#37;;
                font-family: verdana, tahoma, sans-serif;
                                display:table;
                        }
                        #test p{
                        display:table-cell;    
                    vertical-align:middle;
                        }
        </style>
<script type="text/javascript"></script>
</head>
<body>
<div id="test">
    <p>Some text</p>
</div>
</body>
</html>

**gRoberts** · Oct 3, 2007 05:00

an example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" media="screen" />
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
                text-align: center;
            }
            #header {
                text-align: left;
                margin: 0 auto;
                width: 740px;
                height: 125px;
                border: solid 1px;
            }
            #logo {
                float: left;
            }
            #menu {
                float: right;
            }
            #menu li {
                float: left;
                margin-left: 10px;                
                font-family: verdana, tahoma, sans-serif;
                font-size: 66&#37;;
            }
            #menu:after {
                content: "."; 
                display: block; 
                height: 0; 
                clear: both; 
                visibility: hidden;
            }
        </style>
        <script type="text/javascript"></script>
    </head>
    <body>
        
        <div id="header">
            
            <div id="logo">Logo</div>
            <ul id="menu">
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
            </ul>

        </div>

    </body>
</html>

the header div needs to be 125px tall, or at least a fixed height.

**Paul O'B** · Oct 3, 2007 07:07

Hi,

I don't think theres much you can do apart from minimizing the consequences unless you are able to re-design.

Heres a very old em demo of mine and if you scale the text you see how perfectly it grows (within reason).

http://www.pmob.co.uk/temp/emdemo.htm

There is no reason why you can't convert you header to ems even if it means using background images that are bigger than the space available so the element can scale etc.

**gRoberts** · Oct 3, 2007 07:59

i've sorted it. As the background image is a gradient, I simply positioned it to the bottom of the container, and set the height to 8em. this was only about 5px off.

Thanks

User Tag List

Thread: line-height alternative - vert centering

Thread Tools

Display

line-height alternative - vert centering

Bookmarks

Bookmarks

Posting Permissions