Home > Web Front-end > HTML Tutorial > Problem with centering controls in table_html/css_WEB-ITnose

Problem with centering controls in table_html/css_WEB-ITnose

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

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



The running effect is: Figure 1,



The desired effect is as shown in Figure 2


Reply to discussion (solution)

Set line-height and margin: auto auto
Try it

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

The code is as above, but the vertical centering in td is invalid, please help~~

The code is as above, but the vertical centering in td is invalid, please help~~


ie9 can center.

Try adding this attribute vertical-align:middle to TD
or set a height of 80px to TD
and set 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