-1

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

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

3 回答 3

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>
于 2013-06-15T14:55:44.253 回答
0

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

但是，无论如何您都在使用表格，我建议您使用表格本身来保持对齐

于 2013-06-15T14:46:19.563 回答
0

您有无效的标记，因为colon(:)它不在内部borasp: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>
于 2013-06-15T14:46:55.750 回答