Question

这就是我所拥有的，并没有集中。由于某种原因，它一直向左移动。

<div>
        <asp:Label ID="eagleReplicationManagerLabel" runat="server" CssClass="eagleReplicationManagerLabel">
                Eagle Replication Manager
        </asp:Label>
    </div>

css for it：

.eagleReplicationManagerLabel
{
    position: fixed;
    font-size: 30px;
    color: #0000FF;
    text-align: center;
}

Answer 1

它实际上正在工作但你看不到结果，因为它被渲染为一个跨度，它占用了其内容的确切宽度。所以文本没有足够的空间来调整。

增加css样式的宽度将显示原因

.eagleReplicationManagerLabel
{
    position: fixed;
    font-size: 30px;
    color: #0000FF;
    text-align: center;
    width:500px;
}

Answer 2

text-align: center;需要位于包含标签的<div>上。

Answer 3

文本居中，但是是一个内联元素，因此它只与内部文本一样宽。

这就是为什么你不能说它是居中的原因。

给它一些宽度或使其阻挡，你会看到居中。

.eagleReplicationManagerLabel
{
    position: fixed;
    font-size: 30px;
    color: #0000FF;
    text-align: center;
    display:block
}

Answer 4

此处的问题是asp:Label在html上呈现为span，默认情况下，span元素的样式为display:inline;结果，你的CSS类什么也没做。

如果您想将文字置于DIV中心，请在DIV上设置text-align:center或在display:block上设置.eagleReplicationManagerLabel

.eagleReplicationManagerLabel
{
    position: fixed;
    font-size: 30px;
    color: #0000FF;
    text-align: center;
    display:block;
}

Answer 5

.center{
width:200px;
margin:auto;
}

.eagleReplicationManagerLabel
{
 position: fixed;
 font-size: 30px;
 color: #0000FF;
 text-align: center;
}
<div>
<div class="center">
    <asp:Label  Text="Eagle Replication Manager" ID="eagleReplicationManagerLabel1" runat="server" CssClass="eagleReplicationManagerLabel"></asp:Label>
</div>

</div>

如何在Web表单上居中显示文本？

5 个答案: