Question

我有一张桌子。

我希望所有值和按钮都水平和垂直居中。
但问题是：如果我输入按钮链接作为任何行的值，则按钮和所有其他文本值显示为中断。而不是垂直中间。

查看截图： 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>

Answer 1

您可以在css中添加vertical-align: middle;，以使表格的值与单元格的中间对齐。同时添加text-align: center;以使文本位于单元格的中心。

这是我的css：

<style> .features-table{ vertical-align: middle; text-align:center; width: 100%; } </style>

结果是：

你能帮我修理一下桌子吗？

1 个答案: