homepage Welcome to WebmasterWorld Guest from 107.22.70.215
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Vertical alignment
fpaues




msg:3940259
 2:36 pm on Jun 25, 2009 (gmt 0)

I've recently seen the light and am now starting to build a website with validated XHTML and CSS, replacing tabled layout with <div> tags.

However, I'm having trouble with vertical alignment. Yes, I know that it is an oldie, but I just want to check with the CSS savvy lot to see if there might be some (cross-browser and relatively mess free) solution to replicate the following with CSS:


<table>
<tr>
<td valign="middle">
<img src="logo.gif" width="90" height="90">
</td>
<td valign="middle">
<h1>Header text</h1>
</td>
</tr>
</table>

What I'm after is for the logo to be vertically centered in relation to the header (and vice versa) - irrespective of the size of the header.

It would be great if somebody would give me a suggestion! (Or if it's so, tell me there isn't any good CSS solution to my problem and that I'm stuck with altering my layout or resorting to using tables.)

All the best,
Fredrik

 

jameshopkins




msg:3940265
 2:44 pm on Jun 25, 2009 (gmt 0)

The 'valign' attribute is deprecated; the solution is to use the 'vertical-align' CSS property. So, using your example, it would become:-


<table>
<tr>
<td style="vertical-align:middle;">
<img src="logo.gif" width="90" height="90">
</td>
<td style="vertical-align:middle;">
<h1>Header text</h1>
</td>
</tr>
</table>

simonuk




msg:3940267
 2:46 pm on Jun 25, 2009 (gmt 0)

There are ways of vertically aligning the text but it will require JS or CSS hackery to achieve it. This is one of those cases were the cross-browser quirks really come into affect.

I'm not allowed to post links to the answer but try to google vertically align text without the need for JS or vertically align text with JS

jameshopkins




msg:3940271
 2:50 pm on Jun 25, 2009 (gmt 0)

Maybe I misunderstood your issue. However, I should have asked in my first post, why are you using TABLEs for something that looks like it might be for layout?

swa66




msg:3940277
 2:59 pm on Jun 25, 2009 (gmt 0)

I've recently seen the light and am now starting to build a website with validated XHTML and CSS, replacing tabled layout with <div> tags.

Validating is good, not (ab)using tables for layout is good, but "replacing tabled layout with <div> tags" isn't "seen the light" yet I'm afraid.
If you merely replace tables with <div>s you still have a high potential for the same mess you started from.

We even have a name for the over-use of <div> tags: divitis ...
So it's quite common.

Anyway back to your problem.
For a logo in title, I'd go about it like this:

First get the html nailed down:

<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
h1 {
background: yellow;
}
</style>
</head>
<body>
<h1>Header text</h1>
<p>Hello world!</p>
</body>
</html>

As you see I threw out the logo, it's decorative, not content IMHO (others might disagree)

And I added a yellow background to see where the h1 is actually sitting.

Next make it the right height, while keeping the text in the middle ... Either we could use padding, but I kinda grew fond of setting the line height for this.


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
h1 {
background-color: yellow;
line-height: 90px;
}
</style>
</head>
<body>
<h1>Header text</h1>
<p>Hello world!</p>
</body>
</html>

Now let's add the logo as a background image.


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
h1 {
line-height: 90px;
background: yellow url('1s.jpg') no-repeat center left;
}
</style>
</head>
<body>
<h1>Header text</h1>
<p>Hello world!</p>
</body>
</html>

So all we are left with is move the text away from the background image and remove that yellow background:


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
h1 {
line-height: 90px;
background: url('1s.jpg') no-repeat center left;
padding-left: 95px;
}
</style>
</head>
<body>
<h1>Header text</h1>
<p>Hello world!</p>
</body>
</html>

Only tested in FF, Opera and Safari (all latest versions), leaving IE as an exercise for the reader.

If you need to align an image to a baseline: vertical-align:middle is your friend ;)

SuzyUK




msg:3940294
 3:21 pm on Jun 25, 2009 (gmt 0)

using line-height would possibly be the easiest here..providing the <h1> text does not take up more than one line.

e.g.
<style type="text/css" media="screen">
#header {line-height: 90px;}
#header h1 {padding: 0; margin: 0;}
#header img {float: left; margin-right: 20px;}

</style>

[HTML]
<div id="header"><img src="logo.gif" width="90" height="90"><h1>Header text</h1></div>

1. set the wrapper div to have the line-height to match the image.. it's inherited by the image and the <h1>

2. remove the default padding/margin of the <h1> so it neatly uses the 90px.

3. float the image to the left of the header and give it a right margin to make the required gap between image and text.

this will fail if the header text actually takes up 2 lines as the lines will then be 180px high

or:

especially if the header is likely to go over more lines use inline blocks.. (code adapted from this post [webmasterworld.com])

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Centered Inline-Blocks</title>
<style type="text/css" media="screen">
html, body {padding: 0; margin: 0; border: 0; background: #00f;}
#header {
background: #fff;
margin: 0 150px;
border: 1px solid #f00;
padding: 5px;
}

.box {
background: #eee;
margin: 5px;
border: 1px solid #000;

display: -moz-inline-box; /* For FF<3 */
-moz-box-orient: vertical; /* For FF<3 */
vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */

display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
}
</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
.box {display: inline;} /* this is to make inline-block work on block elements versions <IE8 */
</style>
<![endif]-->

</head>
<body>
<div id="header">
<img class="box" src="#" width="90" height="90">
<h1 class="box">test<br>line 2</h1>
</div>
</body>
</html>

the FF<3 workarounds will be overruled by the later display property now that FF also supports this property..

the IE workaround is still required as IE does not natively support inline-block on block level elements

HTH..

fpaues




msg:3940778
 9:27 am on Jun 26, 2009 (gmt 0)

Thank you all for your swift replies! I'll be running your suggestions through rigorous old browser testing :-) As this is a spare-time project that will have to wait until after a get off from work (writing to you from Sweden that would mean in 10-15 hours from now). I'll try to get back to you with feedback on your suggestions post testing.

And finally, an explanatory note:
why are you using TABLEs for something that looks like it might be for layout?

The tables were simply there as a means of reference. The whole purpose of my inquiry is to rid myself of them :-)

jameshopkins




msg:3940798
 9:42 am on Jun 26, 2009 (gmt 0)

The tables were simply there as a means of reference. The whole purpose of my inquiry is to rid myself of them :-)

FYI, the solution in my initial post won't necessarily work, as the 'vertical-align'property only applies to table-cell and inline-level elements.

fpaues




msg:3940814
 10:18 am on Jun 26, 2009 (gmt 0)

James: It was when I realised that small piece of information that my troubles began ;-)

swa66




msg:3941036
 3:17 pm on Jun 26, 2009 (gmt 0)

To vertically center a block into another: (but remember an image is inline by default)
give the parent : position:relative; to make it have position and act as a reference for the child's absolute positioning.
Next give the child said position:absolute; top:0; bottom:0, margin-top:auto; margin-bottom:auto;
This works in many browsers without setting an explicit height on the div (not in opera).
IE6 will freak out, nothing new there.
If you know the height it's possible to fix it in IE6 using the 50% and then a negative margin of half the height.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved