table里面控件居中问题_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:48:23

原创

1476人浏览过

代码如下：

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

登录后复制

运行效果是：如图1，

想要的效果如图2

居然设计家

居然之家和阿里巴巴共同打造的家居家装AI设计平台

查看详情

回复讨论(解决方案)

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

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>

登录后复制

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

ie9可以居中。

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