horizontal and vertical alignment of label in div in table row

问题

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.

回答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;

回答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.

来源：https://stackoverflow.com/questions/3960510/horizontal-and-vertical-alignment-of-label-in-div-in-table-row