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

问题描述：

我想创建一个简单的登录表单。我差不多已经完成了，但桌子上的文字并没有向右移动。我正在使用<span>。我的HTML代码在这里。为什么我的文本不在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; 
}

你是什么意思文本不正确？ – imbondbaby 2014-08-28 03:32:59

而不是给文本对齐跨度给它td，希望你需要创建td类 – 2014-08-28 03:35:33

答

text-align属性不适用于内联元素，span元素默认为内联。最小的问题是增加

span { display: block }

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

而不是span,label应该用于可访问性;但这并不会改变基本问题，因为label也是内联的。

或者，也可以在td元素上设置样式。

答

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

如果你不想使用float:right;

你可以使用：

td{ 
    text-align:right; 
}

PS：这将是更聪明给特定td的ID，否则所有td会按照您在下面的演示中看到的方式对齐。

JSFiddle Demo

答

<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

PS：你的问题是不明确的，你的标题说“它不会中心”，但你的解释说“它不会正确”。假设你想让它走向正确，我已经给出了解决方案。

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

相关推荐