Rumah > hujung hadapan web > html tutorial > table里面控件居中问题_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:48:23
asal
1193 orang telah melayarinya

代码如下:

			<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>
Salin selepas log masuk



运行效果是:如图1,



想要的效果如图2


回复讨论(解决方案)

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

td{vertical-align:center;}
Salin selepas log masuk

		<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>
Salin selepas log masuk

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

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


ie9可以居中。

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan