为什么我的文本不在 HTML 表格中居中？答案

【问题标题】：Why is my text not centered in HTML table?为什么我的文本不在 HTML 表格中居中？
【发布时间】：2014-10-21 19:30:41
【问题描述】：

我想创建一个简单的登录表单。我几乎完成了，但我表格中的文本没有向右移动。我为此使用<span>。我的 HTML 代码在这里。

<div id="login-container">
<form action="login.php" method="post" >
<table>
    <tbody>
        <tr>
        <td><span>Username:</span></td>
        <td><input type="text" name="username" value="" ></td>
        </tr>
        <tr>
        <td><span>Password</span></td>
        <td><input type="password" name="password" value="" ></td>
    </tr>
        <tr>
        <td></td>
        <td><input type="checkbox" name="remember" value="off">remember me?</td>
    </tr>
        <tr>
        <td></td>
        <td><input type="submit" name="submit" value="Login" id="button"></td>
    </tr>
    </tbody>
</table>

我的 CSS 在这里。当我使用float:right 时，它会向右移动。

span {
    color:black;
    font-family:"Arial Black", Gadget, sans-serif;
    font-weight:bold;
    font-size:13px;
    text-align:right;
}

【问题讨论】：

你的意思是文本不向右？
而不是将文本对齐到 span 将其提供给 td，希望您需要为 td 创建类

标签： html html-table text-align

【解决方案1】：

text-align 属性不适用于内联元素，span 是内联元素。因此，text-align 属性不适用于它。

如果你不想使用float:right;

你可以使用：

td{
    text-align:right;
}

PS： 给特定的td 一个ID 会更聪明，否则所有td 都会像您在演示中看到的那样向右对齐下面。

JSFiddle Demo

【讨论】：

【解决方案2】：

<span> 仅占用可用文本的宽度，因此将text-align:right 分配给span 不会有任何区别，您应该将其应用于td。

示例：请参阅此链接以更好地了解Span

CSS：

span {
color:black;
font-family:"Arial Black", Gadget, sans-serif;
font-weight:bold;
font-size:13px;

}
td{text-align:right;}

看到这个小提琴：DEMO

P.S：您的问题不清楚，您的标题说“它不会居中”，但您的解释说“它不会正确”。假设您希望它正确运行，我已经给出了解决方案。

【讨论】：

【解决方案3】：

text-align 属性不适用于内联元素，span 元素默认是内联的。一个最小的修复是添加

span { display: block }

但是，这样的规则是有风险的；您可能应该使用更严格的选择器，但这取决于页面结构。

应该使用label 而不是span 来实现可访问性；但是这并没有改变基本问题，因为label 也是内联的。

或者，改为在 td 元素上设置样式。

【讨论】：