Question

我想调整＆＃39; ：＆＃39; 垂直，怎么做？

    <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>

Answer 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>

Answer 2

您需要使用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>

然而，无论如何，当你正在使用桌子时，我建议使用桌子来保持对齐

Answer 3

由于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>

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

3 个答案: