Help with vertical-align

HTML & CSS
1

Hope someone can help with this - I’m just trying to vertical-align some text in a <div> - its the top row in an inset box, where the text will either take up one line or two.

I’ve tried vertical-align:middle;

float: left;
	position:absolute;
	height:27px;
	background-color:#F4F4F4;
	color:#1655A5;
	top:0px;
	left:0px;
	width:197px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	vertical-align:middle;
	padding:5px 5px 5px 10px;

With two lines of text it looks right:

http://www.handprintwebdesign.co.uk/coverage/coverage3/coverage102.htm

But with one line, it sits too high:

http://www.handprintwebdesign.co.uk/coverage/coverage3/coverage101.htm

And I tried making the line-height the same as the height:

#title {
	float: left;
	position:absolute;
	height:27px;
	line-height:27px;
	background-color:#F4F4F4;
	color:#1655A5;
	top:0px;
	left:0px;
	width:197px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	padding:5px 5px 5px 10px;
}

Which looks fine with one line:

http://www.handprintwebdesign.co.uk/coverage/coverage3/coverage201.htm

But only displays one line, and anything else gets chopped off:

http://www.handprintwebdesign.co.uk/coverage/coverage3/coverage202.htm

Is there any way of having one rule that will display the text centrally for either one line or two lines of text?

Thanks.

2

In all sites you provided if in #text you remove all line-height and add this :

Css code


text-align:center;
vertical-align:middle;

it will align the text in center vertically and horizontally.

By the way … very nice app … you made it ? Only javascript ? :slight_smile:

3

That won’t work I’m afraid as vertical-align (outside of table-cells) only applies to inline elements on the same line. It will not align two or more lines.

For IE8+ you could add an inner span element and turn it into a table-cell element as follows.


#title {
	position:absolute;
	height:27px;
	background-color:#F4F4F4;
	color:#1655A5;
	top:0px;
	left:0px;
	width:197px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	padding:5px 5px 5px 10px;
	[B]display:table;[/B]
}
[B]#title span{
	display:table-cell;
	vertical-align:middle;
}[/B]



<div id="title"><span>Operator name here </span></div>

If you want IE7 and under support then it can be down with a different method using inline-block and another empty element.

4

It seems i miss some details but wont text-align alone do the job ? (:

@Paul Where can i find a good reference that explains in detail how display property works ( in combination to other properties as well) ?

5

It’s a common mistake so don’t worry :slight_smile:

If you had just one line of text and the text did not wrap then you could set the line-height to the same height as the div (27px in the example above) and that one line of text would automatically be centred. However it won’t work for 2 lines of text because when the text wraps each line will be 27px apart.

Vertical align only applies to inline elements on the same single line (unless they are table-cells or display:table-cell). It does not apply to two or more lines unless the lines are wrapped in an inline block and there is an other inline-block element on the same line that they can line up against (as shown clearly in Gary’s article I linked to above).

@Paul Where can i find a good reference that explains in detail how display property works ( in combination to other properties as well) ?

The sitepoint reference (written by Tommy and me) gives you the solid details but is not a tutorial as such.

The w3c visual formatting model is the ultimate resource but is hard to digest unless you are familiar with the terminology.