Question

结果如下图

我想将两个 <selector> 放在表格单元格的中间。我怎样才能做到这一点？现在，两个 <selector> 标签粘在左侧网站上。

<!DOCTYPE html>
<body>
    <table class="center">
        <tr>
            <td> <input type="number" value=0 id="n1" oninput="test()" /> <br /><br /> </td>
            <td> </td>
            <td> <input type="text" value=0 id="result" readonly /><br><br> </td>
        </tr>
        <tr>
            <td>
                    <select id="selector1">
                        <option value="s">Seconds</option>
                        <option value="m">Minutes</option>
                    </select>
            </td>
            <td> <button onclick="myFunction()">Invert</button> </td>
            <td>
                <select id="selector2">
                    <option value="s">Seconds</option>
                    <option value="m">Minutes</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

为了对齐 td 中心，我们有属性 align='center'。或者您可以使用某个类并应用于那些 td。

<!DOCTYPE html>
<body>
    <table class="center">
        <tr>
            <td> <input type="number" value=0 id="n1" oninput="test()" /> <br /><br /> </td>
            <td> </td>
            <td> <input type="text" value=0 id="result" readonly /><br><br> </td>
        </tr>
        <tr>
            <td align="center">
                    <select id="selector1">
                        <option value="s">Seconds</option>
                        <option value="m">Minutes</option>
                    </select>
            </td>
            <td> <button onclick="myFunction()">Invert</button> </td>
            <td align="center">
                <select id="selector2">
                    <option value="s">Seconds</option>
                    <option value="m">Minutes</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 2

要设置选择器的中心对齐，您只需将 text-align: center 属性设置为该 td 标签

.selector-wrapper{
text-align: center;
}

table, td, th {
  border: 1px solid black;
}

table {
  width: 100%;
  border-collapse: collapse;
}

<!DOCTYPE html>
<body>
    <table class="center">
        <tr>
            <td> <input type="number" value=0 id="n1" oninput="test()" /> <br /><br /> </td>
            <td> </td>
            <td> <input type="text" value=0 id="result" readonly /><br><br> </td>
        </tr>
        <tr>
            <td class="selector-wrapper">
                    <select id="selector1">
                        <option value="s">Seconds</option>
                        <option value="m">Minutes</option>
                    </select>
            </td>
            <td> <button onclick="myFunction()">Invert</button> </td>
            <td class="selector-wrapper">
                <select id="selector2">
                    <option value="s">Seconds</option>
                    <option value="m">Minutes</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 3

在包含#selector1 和#selector2 的块容器上，尝试：

container {
 align-items: center;
 justify-content: center;
}

编辑：

正如 Heretic Monkey 指出的那样，我发布的内容仅适用于 CSS Grid 和 Flex 容器。因此，在不将 td 元素更改为 flex 容器的情况下，执行以下操作：

#selector1 {
 margin: auto;
 text-align: center;
}

#selector2 {
 margin: auto;
 text-align: center;
}

感谢您更新您的问题，以便我可以看到代码。我希望这会有所帮助，请告诉我。

如何将选择器标签居中？

3 个答案: