如何使用css垂直对齐冒号？答案

【问题标题】：How to align colon vertically using css?如何使用css垂直对齐冒号？
【发布时间】：2013-06-17 17:01:24
【问题描述】：

我想垂直对齐 ' : '，怎么做？

    <td>                                         
        <b>ID</b>:<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
        <br></br>
        <b>Name</b>:<asp:Label ID="Name0" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
        <br></br>
        <b>Age</b>:<asp:Label ID="Age0" runat="server" Text='<%# Bind("Age") %>'></asp:Label>
        <br></br>
        <b>Height</b>:<asp:Label ID="Height0" runat="server" Text='<%# Bind("Height") %>'></asp:Label>
        <br></br>
        <b>Education</b>:<asp:Label ID="Education0" runat="server" Text='<%# Bind("Education") %>'></asp:Label>
    </td>
</tr>

【问题讨论】：

垂直对齐冒号？？？？？？你到底是什么意思？
我希望那些 : 在这两个标签之间垂直对齐并居中，怎么做？
我说得更清楚一点：td {vertical-align:middle;} 如果 td 比内容高，则内容垂直居中对齐。它通常是 td 的垂直对齐的默认值如果这不是问题，那么 brs 到底在做什么:)？

标签： html asp.net css

【解决方案1】：

我只是将字段和值拆分为列。然后你所要做的就是右对齐字段表格单元格。

CSS：

.left-column
{
    text-align: right;
    font-weight: bold;
}

HTML：

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td class="left-column">
                        ID:
                    </td>
                    <td>
                        <asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Name:
                    </td>
                    <td>
                        <asp:Label ID="Name0" runat="server" Text='<%# Bind("Name") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Age:
                    </td>
                    <td>
                        <asp:Label ID="Age0" runat="server" Text='<%# Bind("Age") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Height:
                    </td>
                    <td>
                        <asp:Label ID="Height0" runat="server" Text='<%# Bind("Height") %>' />
                    </td>
                </tr>
                <tr>
                    <td class="left-column">
                        Education:
                    </td>
                    <td>
                        <asp:Label ID="Education0" runat="server" Text='<%# Bind("Education") %>' />
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>

【讨论】：

谢谢 :) 这很容易：p
@vinay teja reddy 。我不知道他是如何从阅读您的问题中猜到这就是您想要的:)
@GCyrillus - 你怎么没有？这是非常明显的。只需查看标记和“对齐冒号”。阅读上下文线索总是有帮助的。

【解决方案2】：

您的标记无效，因为 colon(:) 不在 b 或 asp:Label 内。改变

<b>ID</b>:<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>

到这里

<b>ID :</b><asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>

【讨论】：

确定如何将这些冒号放置在中心并在这些标签之间垂直对齐？

【解决方案3】：

您需要使用具有display:inline-block 的元素，然后才能使用vertical-align:middle

编辑

我误解了这个问题。您可以在 <b> 标签上设置最小宽度，但它不是完全跨浏览器：

<style>
    p b { min-width: 50px; display:inline-block; }
</style>
<p><b>Foo</b>:</p>
<p><b>Bar</b>:</p>

但是，由于您使用的是表格，我建议您使用表格本身来保持对齐

【讨论】：

你能告诉我怎么做吗，我不擅长 css