Vertical alignment

On this site http://bit.ly/gkyS2p when you click on News in the switch, you get three articles, I want the title to be vertically aligned when it’s only 1 line long, such as the Season’s Greetings. I would like that to be moved further down to be aligned to middle with the other two headings which are on 2 lines. How can I do this? Thanks

The logical thing to do would be to make the “seasons greetings” image the same height as the others. Not only would that line up the headings but it would balance out the images.

The image is the same height as the others, I just need the heading to align as described.

The image is the same height as the others

No, the “seasons greeting image” is re-sized to 80px height

The other flag images are 107px height

I see, just ignore the images, my issue is with the headings not the images.

Well for starters vertical-align only applies to inline elements and tables.

You have your h3 text nested in an anchor so there’s one inline element. If you set a height (in ems) on your h3 you could then nest an empty span in it and set height:100% on it.

Now set the span and anchor to vertical-align:middle

That em height on the h3 would need to be enough to handle wrapping text.

made the changes but still having the same behaviour, can you check whether I’ve missed something? The h3 height is still in px but when I tried it in ems it still gave the same result.

can you check whether I’ve missed something?
Just look through this example I made and then it will show you how to apply it to your page.

You will need to use inline-block on your h3 span and anchor in order to give them dimensions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
#wrap {
    float:left;
    background:#EEF;
}
.sheet {
    float:left;
    width:261px;
    min-height:400px;
    margin-left:8px;
    padding:17px 20px;
    position:relative;
    background:#CDF;
}
.image {
    width:255px;
    height:107px;
    background:red;
    margin:0 auto;
}
.sheet h3 {
    width:200px;
    height:3.5em;
    margin:12px auto 17px;
    text-align:center;
    color:#252523;
    font:18px/1.2 GrandesignNeueSerifRegular,Georgia,"Times New Roman",Times,serif;
    background: #FFF;
}
.sheet h3 a,
.sheet h3 span {
    display:inline-block;
    vertical-align:middle;
}
.sheet h3 a {
    width:200px;
    margin-right:-1px;
    color:#252523;
}
.sheet h3 span {
    height:100%;
    width:1px;
    background:red
}
</style>

</head>
<body>

<div id="wrap">
    <div class="sheet">
        <div class="image">Image</div>
        <h3><a href="#">Season's Greetings</a><span></span></h3>
    </div>
    <div class="sheet">
        <div class="image">Image</div>
        <h3><a href="#">Malta is the EU leader...</a><span></span></h3>
    </div>
    <div class="sheet">
        <div class="image">Image</div>
        <h3><a href="#">White Paper on Open Source...</a><span></span></h3>
    </div>
</div>

</body>
</html>

You could make the anchors in the headings inline-block and vertical align them inside the headings with a line-height same as the heading height.

Note that you have these rule sets twice in code. Remove one of the sets.

Try e.g:


#content div.home-updates div.sheet h3 {
	font-size: 18px;
	color: #222;
	width: 200px;
	text-align: center;
	margin: [COLOR="Red"]15px[/COLOR] auto[COLOR="Red"] 5px[/COLOR];
	height: [COLOR="Red"]45px[/COLOR];
[COLOR="Red"]	line-height: 45px;[/COLOR]
}

#content div.home-updates div.sheet h3 a {
	color: #252523;
[COLOR="Red"]	display: inline-block;
	line-height: 1.2;
	vertical-align:middle;[/COLOR]
}

EDIT)
Beaten to the punch! :slight_smile:

.

Tried to copy the technique but still not getting them aligned :S

You did not put the span in your h3 and you did not change the height of the h3.

Look closer through my example :wink:

It’s not going to look right until you fix the height of that first image though

I did put the span, its showing on mine inside the h3

There is no span in the html yet, I have cleared my cache in FF and I viewed your page in Chrome for the first time

<h3><a  href="http://www.beekado.com/testing/comnet/news-articles/news/seasons-greetings/">Season&#8217;s Greetings[COLOR=Red][B]</a>[/B][/COLOR]</h3> 

There is no span after the </a>

That’s because you’re on the wrong page, this is the one I had mentioned http://bit.ly/gkyS2p

You did not get the widths correct on the span and the anchor and you still have not set an em height on the h3.

The anchor gets the full 200px width with a -1px right margin to soak up the 1px width of the span

I did not set a height on the anchor either whereas you did (the 100% height goes on the span not the anchor)

Again: Look closer at my example

You have your h3’s declared twice in your css, on line 708 and line 870. The rulesets are the same and line 870 overrides line 708 so just remove the first one completely.

Here is how you have your cascade set up:

duplicate rules and errors in red
my corrections in blue
your correct rules in green

#content div.home-updates div.sheet h3 { [COLOR=Red][B]/*line 708 - Not Needed*/[/B][/COLOR]
color:#222222;
font-size:18px;
[COLOR=Red]height:35px;[/COLOR]
margin:15px auto;
text-align:center;
width:200px;
}

#content div.home-updates div.sheet h3 [B]a [/B]{ [B]/*line 717*/[/B]
[COLOR=Red]/*height:100%;*/[/COLOR]
[COLOR=Red]/*vertical-align:middle;*/[/COLOR]
[COLOR=Blue]width:100%;
margin-right:-1px;[/COLOR]
color:#252523;
}

#content div.home-updates div.sheet[B] h3[/B] { [COLOR=Blue][B]/*line 870*/[/B][/COLOR]
color:#222222;
font-size:18px;
[COLOR=Blue]height:3.5em;[/COLOR]
margin:15px auto;
text-align:center;
width:200px;
}

#content div.categories div.sheet h3 a, 
#content div.home-updates div.sheet h3 a, 
#content div.categories div.sheet h3 span, 
#content div.home-updates div.sheet h3 span { [B]/*line 879*/[/B]
[COLOR=DarkGreen]display:inline-block;
vertical-align:middle;[/COLOR]
}

#content div.home-updates div.sheet h3 [B]span [/B]{ [B]/*line 887 */[/B]
[COLOR=DarkGreen]height:100%;
width:1px;[/COLOR]
}

works now, thanks.