Forum Moderators: not2easy
The parent div's position is set to relative and then the inside div's position is set to absolute. I have read that one needs to set display to table or table-cell for the
vertical-align: middletop:50%margin:autoThis should be an easy fix, but I know that I'm overlooking something simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Intro page</title>
<style type="text/css">
.box {height: 150px; font-weight: bold; position: relative; border: 1px solid red; width: 600px;}
.box .intro {position: absolute; top: 50%; left: 315px; margin: auto; display: table-cell; border: 1px solid green; vertical-align: middle;}
</style>
</head>
<body>
<div class="box">
<img src="blah.gif" width="291px" height="148px" border="1" alt="" />
<div class="intro">
Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text
Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text
</div>
</div>
</body>
</html>
Thank you for any assistance.
<style type="text/css">
<!--
.box {font-weight: bold;border: 1px solid red;width: 600px;height: 148px;}
img {padding: 0;margin: 0em 1em 0em 0em;}
p {margin: 0;padding: 0;}
.left {float: left;}
-->
</style>
html:
<div class="box">
<img src="blah.gif" alt="" width="291" height="148" border="1" class="left" /><p>Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text <br>
Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text Intro text </p>
</div>
.introI cannot see how your float: left does this. Could you please clarify? Thanks.
If no-one replies I'll answer it tomorrow (about to leave work ;-) )
Specify the line height to be the same as the height of the box itself in the CSS.
Any other ideas?
