horizonal and vertical alignment of label in div in table row

Question

I have code:

<tr>
    <td align="center" style="height: 50px; text-align: center; vertical-align: middle"   >
           <div class="hoverClass ui-widget-content ui-corner-all" style="text-align: center; vertical-align: middle;width:100%;height:100%">
                 <label style="text-align: center; vertical-align: middle" >Streetlight Repair</label>
           </div>
     </td>
</tr>

I want it to be a cell with a div containing a label. I want the div to take up the whole cell. and the label to be centered within the div. However the label sits at the top left of the div.

Any ideas?

Answer 1

If the height is definitely 50px, set the line-height CSS of the label to 50px;

To get the label in the middle horizontally, set margin-left:auto; and margin-right:auto;

Answer 2

If you have more than one line, you can not use the line-height property to hack middle alignment.

Easiest way is to play with top and bottom padding.

I blogged about this.