Horizontal and vertical alignment of a label in a div in a table row

Question

I have a 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 the label. I want the div to occupy the whole cell. and the label to be centered inside the div. However, the shortcut is in the upper left corner of the div.

Any ideas?

Answer 1

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

To get the horizontal middle mark, set margin-left: auto; and margin-right: auto;

Answer 2

If you have more than one line, you cannot use the property line-heightto crack the middle alignment.

- .