Home >Web Front-end >HTML Tutorial >Problem with centering controls in table_html/css_WEB-ITnose
The code is as follows:
<table style="width:95%;border-collapse: collapse;border: 1px solid black;text-align:center"> <tr style="height:20px"> <td style="width:5%;border: 1px solid black;"></td> <td style="width:65%;border: 1px solid black;"><j:Message msgId="PE10.Objectives_Responsibilities"/></td> <td style="width:30%;border: 1px solid black;"><j:Message msgId="PE10.Percentage_of_time_to_be_spent"/></td> </tr> <tr style="height:80px;"> <td style="width:5%;border: 1px solid black;">1</td> <td style="width:65%;border: 1px solid black;"></td> <td style="width:30%;border: 1px solid black;"><j:TextBox name="percentOne" id="percentOne" width="20px"></j:TextBox>%</td> </tr> </table>
Set line-height and margin: auto auto
Try it
td{vertical-align:center;}
<div class="formContentStyle2 AfterSearchTo"> <table style="width:95%;border-collapse: collapse;border: 1px solid black;text-align:center;"> <tr style="height:20px"> <td style="width:5%;border: 1px solid black;"></td> <td style="width:65%;border: 1px solid black;"><j:Message msgId="PE10.Objectives_Responsibilities"/></td> <td style="width:30%;border: 1px solid black;"><j:Message msgId="PE10.Percentage_of_time_to_be_spent"/></td> </tr> <tr style="height:80px;"> <td style="width:5%;border: 1px solid black;">1</td> <td style="width:65%;border: 1px solid black;"></td> <td style="width:30%;border: 1px solid black;margin:auto;vertical-align:center"><span><input type="text" style="width:20px" id="percent"/>%</span></td> </tr> </table> </div>
The code is as above, but the vertical centering in td is invalid, please help~~
Try adding this attribute vertical-align:middle to TD
or set a height of 80px to TD
and set line-height:80px