Vertically and horizontally center two lines of text

HTML & CSS
1

I know vertical-align works great on one line of text, but I can’t get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div?

echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">';
echo '<h1 >1/35 Scale House</h1>';
echo '</div>';
2

Hi,

You would need display:table-cell and vertical-align:middle but you can’t float a table-cell. therefore you would be better turning the h1 into a table-cell instead and do 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.vert {float:left;}
.vert h1 {
	margin:0;
	display:table-cell;
	vertical-align:middle;
	width:171px;
  height:96px;
	text-align:center;
	background-color:yellow;
}
</style>
</head>
<body>
<div class="vert">
	<h1>1/35 Scale House</h1>
</div>
</body>
</html>
3

Thanks Paul O’B. Apparently the property order makes a difference. How did you know to introduce the properties in that order?

4

By making the h1 a table-cell the browser constructs an anonymous display:table element around it which leaves you free to float the parent div. You can’t float table-cells so the only way to do it was from the inside out.

5

didn’t know that. Thanks again Paul O’B.

Niche