Forum Moderators: not2easy
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
<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>
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
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 ;)
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..
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 :-)
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.
