Я знаю, что это обычный вопрос, но я просто не могу понять это правильно. Я перепробовал все, кроме одной вещи, которая сделает эту работу, включая различные места размещения и комбинации настроек очистки и переполнения. Вот мой код (урезанный для публикации)
<style>
#message { border:thin red dashed; overflow:hidden; }
#message p { border:thin red solid; }
#line1 { border:thin blue solid; }
#text { text-align:center; background-color:#FCF; vertical-align:middle;}
#photo { float:left; width:160px; border:thick black solid;}
</style>
</head>
<body>
<div id="Main">
<div id="line1">
<div id="message" >
<div id="photo" > <!-- floated pic box -->
Pretend a picture is here. Pretend a picture is here.
Pretend a picture is here. Pretend a picture is here.
</div> <!-- photo -->
<div id="text"> Click here to see all Key West Tours, Attractions and Packages<br />
Buy Online and Save!
</div> <!-- text -->
</div> <!-- message -->
</div> <!-- line1 -->
</div> <!-- Main -->
Я хочу, чтобы текст был выровнен по середине, и понимаю, что это потому, что фактический текстовый div (розовая рамка) может выравнивать середину в течение всего дня и до тех пор, пока он остается на такой высоте, он не изменится.
Вопрос: Как заставить мой текстовый div расти до высоты ложного графического блока, чтобы я мог выровнять его по середине этого раздела?