Align text vertical

HTML & CSS
1

Please take a look at this page:

http://www.ravelly.com/valign.html

How do I align the text vertically in the middle of the block?

2

Just remove float:left from the image and it will automatically centralise. You should make sure that the td is set to vertical-align:middle also in case that is not the default.

td.yourclassname {vertical-align:middle}

3

Thanks, removing “float:left” from the image did work.

Another question, take a look again at my link. Like you can see the text goes under the image. I don’t want this. I want all text to be centralized and all text to the right of the image, not under. Any one know how I can achieve this?

4

Hi,

There are a number of ways you can do that but it depends on what the requirements are.

The way I usually do this is simply to place that tick image as a background image on the container and set it at background-position 0 50%.
e.g.


<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.error {
	width:450px;
	margin:auto;
	padding:10px 10px 10px 50px;
	min-height:32px;
	border:1px solid #000;
	color:#000;
	border-radius:5px;
	text-align:left;
}
.success{
	background:#9bdd74 url(http://www.ravelly.com/success.png) no-repeat 10px 50%;
	color:#36750f;
	border-color:#36750f;
}
</style>
</head>

<body>
<div class="error success">Changes to your email preferences have been saved. Changes to your email preferences have been saved.</div>
</body>
</html>

If you must have the image in the html then something like this:


<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.error {
	width:450px;
	margin:auto;
	padding:10px;
	border:1px solid #000;
	color:#000;
	border-radius:5px;
	text-align:left;
}
.success {
	background:#9bdd74;
	color:#36750f;
	border-color:#36750f;
}
.error span {
	display:table-cell;
	vertical-align:middle;
	padding:0 5px;
}
</style>
</head>

<body>
<h1>IE8+</h1>
<div class="error success"> <span><img src="http://www.ravelly.com/success.png" width="32" height="32"></span><span>Changes to your email preferences have been saved. Changes to your email preferences have been saved.</span></div>
</body>
</html>

Or like this:


<!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=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.error {
	width:450px;
	margin:auto;
	padding:10px;
	border:1px solid #000;
	color:#000;
	border-radius:5px;
	text-align:left;
}
.success {
	background:#9bdd74;
	color:#36750f;
	border-color:#36750f;
}
.error span {
	display:inline-block;
	vertical-align:middle;
	padding:0 5px;
}
.message{width:390px}
</style>
</head>

<body>
<h1>IE6+</h1>
<div class="error success"> <span><img src="http://www.ravelly.com/success.png" width="32" height="32"></span><span class="message">Changes to your email preferences have been saved. Changes to your email preferences have been saved.</span></div>
</body>
</html>
5

Thank you very much. I do learn a lot from you guys when I post my problems on this forum.

As you can see, I use tables to create layouts. I know I know, this is a very bad habit of mine and I am working on it!