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

WBOY
Release: 2016-06-24 11:48:23
Original
1146 people have browsed it

代码如下:

			<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>
Copy after login



运行效果是:如图1,



想要的效果如图2


回复讨论(解决方案)

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

td{vertical-align:center;}
Copy after login

		<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>
Copy after login

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

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


ie9可以居中。

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!