Home/ Questions/Q 96061
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T23:45:21+00:00

Thanks for reading this. I have markup similar to what is below. Using the

  • 0

Thanks for reading this.

I have markup similar to what is below. Using the line-height works when there is only one line of text, but the comments data will frequently be multi-line. What is the best way to get the label and the data vertically centered?

<html>  <head>  <style>   body {margin:0; padding:0; font-size:12px; font-family:Verdana; text-align:center;}   body {text-align: -moz-center; }  /* For Firefox */   .record {width:760px; text-align:left; }   .label {float:left; width:125px; line-height:75px;}   .data {float:left; margin-left:10px; line-height:75px;}   .clear {clear:left;}  </style>  </head>  <body>   <div class='record'>    <div class='label'>Subject:</div>    <div class='data'>This is the subject</div>    <span class='clear'></span>     <div class='label'>Status:</div>    <div class='data'>This is the status</div>    <span class='clear'></span>     <div class='label'>Comments:</div>    <div class='data'>These are the comments</div>    <span class='clear'></span>   </div>  </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

    and of course:

    http://www.google.com/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=vertically+align+text+div&spell=1

    🙂

    Tables have their place; but it is good to try and figure how to do something in a div before resorting back to tables. That way when the time comes that you can’t do something in a table you know instantly how to do that in a div. Besides – although they can be more complex then tables they allow for MUCH better flexibility in your design once you know how.

    • 0