tags:

views:

650

answers:

4

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>
A: 

Probably what you want to use is a <table> construction for your data. Although there's a lot of documents circulating around saying, "tables are bad; never use tables," tables are clearly the right construction here because they can easily achieve the visual effect you're looking for, and (from what I can tell) you are presenting tabular data.

Ben Alpert
I agree. Blah blah tables are bad, you try to get two divs to sit side by side and split screen real estate. It's much harder than just making a table. That being said, putting the table inside a div isn't a bad idea, makes it easier to move around on the page.
jcollum
A: 

Are you trying to simulate a table? Use a <table> :)

eelco
+1  A: 

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

and of course:

http://www.google.com/search?hl=en&amp;sa=X&amp;oi=spell&amp;resnum=0&amp;ct=result&amp;cd=1&amp;q=vertically+align+text+div&amp;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.

nlaq
A: 

I read the solutions that teach you how to do this with a DIV. When I faced a similar issue, I just used a table, using which looks less messy and pretty elegant to me.

I don't think there's anything wrong in using a table in this particular situation at least.

Cyril Gupta