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?
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?
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}
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?
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>
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!