Aligning images in middle of text

HTML & CSS
1

I am trying to get an image to line up so that no matter how long the text is the image always appear in the middle of the text vertically. I want the image to be aligned vertically so if the text is 20 lines long the image will sit in the middle vertically equally if its 40 lines long it’s still in the middle vertically.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
/**************/
/* asset_list */
/**************/

.pic {
	float: left;
	display: inline;
	margin: 0px 30px 0px 0px;
}

h2 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 7px;
	color: #d92926;
}

h4 {
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 7px;
	color: #d92926;
}



p {	font-size:11px;
	color:#000;
	line-height: 1.4em;
	margin-bottom:10px;
	margin-top:10px;
	width: 500px;}
</style>
</head>

<body>

							<div class="pic"><img src="lorem.jpg" alt="Finance Director" border="1px solid" width="125" height="127" /></div>
							<h2>Lorem</h2>
                                <h4>Financial Director</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p>

</body>
</html>

Cheers for any help

2

Hi,

You could use display:inline block for modern browsers but you’d need to add a little hack for ie6 and 7.

Here’s an example:

http://www.pmob.co.uk/temp/vert-align-textandimage2.htm

If you need to support Firefox 2 and equivalent mozilla versions you need to add an extra div and some proprietary code like so:

http://www.pmob.co.uk/temp/vert-align-textandimage3.htm

Here’s the code added to your code above:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/**************/
/* asset_list */
/**************/
.outer {
    width:700px;
}
.pic {
    margin: 0px 30px 0px 0px;
}
.pic,.wrap {
    display:-moz-inline-box;/* Firefox2 and equivalent fix */
    display:inline-block;
    vertical-align:middle;
}
.wrap {width:500px}/* must be wide enough for image and div to sit on same line*/
.ff2 {width:500px}/* Firefox2 and equivalent fix */
h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 7px;
    color: #d92926;
}
h4 {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 7px;
    color: #d92926;
}
p {
    font-size:11px;
    color:#000;
    line-height: 1.4em;
    margin-bottom:10px;
    margin-top:10px;
    width: 500px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.pic, .wrap{display:inline}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
    <div class="pic"><img src="lorem.jpg" alt="Finance Director" border="1px solid" width="125" height="127" /></div>
    <div class="wrap">
        <div class="ff2">
            <h2>Lorem</h2>
            <h4>Financial Director</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.</p>
        </div>
    </div>
</div>
</body>
</html>

Hope that helps.

3

Brilliant Thank you.