table里面控件居中问题_html/css_WEB-ITnose-tutoriel HTML-php.cn

table里面控件居中问题_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:48:23

original

1215 Les gens l'ont consulté

代码如下：

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

Copier après la connexion

运行效果是：如图1，

想要的效果如图2

回复讨论(解决方案)

设置line-height 、 margin ：auto auto
试试看

td{vertical-align:center;}

Copier après la connexion

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

Copier après la connexion

代码如上，可是td里面的垂直居中无效，求救~~

ie9可以居中。

试试 td 增加这个属性 vertical-align:middle
或者给TD设置80px的高度
还有设置 line-height:80px