我有一张 table 。
- 我希望所有值和按钮都应水平和垂直居中。
- 但问题是:如果我将按钮链接作为任何行的值输入，那么按钮和所有其他文本值将显示为断开且不垂直居中。
见截图: Screenshot 你能解决这个问题吗？
我的代码:
<html lang="en">
<head>
<!-- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> -->
<title>CSS3 Feature Table</title>
<div id="main">
<table class="features-table">
<thead>
<tr>
<td></td>
<td>Standard</td>
<td>Links</td>
<td>Professional</td>
<td>Links</td>
<td>Business</td>
<td>Links</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Value1</td>
<td>
<input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
</td>
<td>2000</td>
<td>
<input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
</td>
<td>3500</td>
<td>
<input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
</td>
<td>6000</td>
</tr>
<tr>
<td>Value2</td>
<td>
<input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
</td>
<td>1900</td>
<td>
<input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
</td>
<td>3200</td>
<td>
<input type="submit" style="background-color: blue" value="Features" onclick="javascript:window.open('http://www.facebook.com/', '_blank');">
</td>
<td>5000</td>
</tr>
<tr>
<td>Value3</td>
<td>Value</td>
<td>300</td>
<td>Value</td>
<td>500</td>
<td>Value</td>
<td>900</td>
</tr>
<tr>
<td>Value4</td>
<td>Value</td>
<td>400</td>
<td>Value</td>
<td>700</td>
<td>Value</td>
<td>1000</td>
</tr>
<tr>
<td>Value5</td>
<td>Value</td>
<td>500</td>
<td>Value</td>
<td>1000</td>
<td>Value</td>
<td>3000</td>
</tr>
<tr>
<td>Value6</td>
<td>Value</td>
<td>200</td>
<td>Value</td>
<td>300</td>
<td>Value</td>
<td>400</td>
</tr>
<tr>
<td>Value7</td>
<td>Value</td>
<td>100</td>
<td>Value</td>
<td>300</td>
<td>Value</td>
<td>500</td>
</tr>
<tr>
<td>Value8</td>
<td>Value</td>
<td>200</td>
<td>Value</td>
<td>500</td>
<td>Value</td>
<td>700</td>
</tr>
<tr>
<td>value9</td>
<td>value</td>
<td>value</td>
<td>value</td>
<td>30</td>
<td>Value</td>
<td>50</td>
</tr>
<tr>
<td>Value10</td>
<td>Value</td>
<td>10</td>
<td>Value</td>
<td>20</td>
<td>Value</td>
<td>30</td>
</tr>
<tr>
<td>Value11</td>
<td>Value</td>
<td>10</td>
<td>Value</td>
<td>20</td>
<td>Value</td>
<td>30</td>
</tr>
<tr>
<td>Value12</td>
<td>Value</td>
<td>5</td>
<td>Value</td>
<td>10</td>
<td>Value</td>
<td>15</td>
</tr>
<tr>
<td>Value13</td>
<td>Value</td>
<td>5</td>
<td>Value</td>
<td>20</td>
<td>Value</td>
<td>40</td>
</tr>
<tr>
<td>Value14</td>
<td>Value</td>
<td>15</td>
<td>Value</td>
<td>30</td>
<td>Value</td>
<td>40</td>
</tr>
<tr>
<td>Value15</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>30</td>
<td>Value</td>
<td>50</td>
</tr>
<tr>
<td>Value16</td>
<td>Value</td>
<td>300</td>
<td>Value</td>
<td>700</td>
<td>Value</td>
<td>1000</td>
</tr>
<tr>
<td>Value17</td>
<td>Value</td>
<td>100</td>
<td>Value</td>
<td>200</td>
<td>Value</td>
<td>300</td>
</tr>
<tr>
<td>Value18</td>
<td>Value</td>
<td>100</td>
<td>Value</td>
<td>200</td>
<td>Value</td>
<td>400</td>
</tr>
<tr>
<td>Value19</td>
<td>Value</td>
<td>100</td>
<td>Value</td>
<td>200</td>
<td>Value</td>
<td>300</td>
</tr>
</tbody>
</table>
</div>
</head>
</html>
</div>
最佳答案
您可以添加 vertical-align: middle;在您的 CSS 中，使表格将其值与单元格的中间对齐。同时添加 text-align: center;使文本位于单元格的中心。
这是我的 CSS:
<style>
.features-table{
vertical-align: middle;
text-align:center;
width: 100%;
}
</style>
结果是:
关于html - 你能帮我修一下 table 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33227367/