How to align colon vertically using css? - html

Question

I want to align ' : ' vertically, how to do that?
<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

I simply split the fields and values into columns. Then all you have to do is right-align the field table-cell.
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

You have invalid markup as colon(:) doesn't inside b or asp:Label.
change
<b>ID</b>:<asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
to this
<b>ID :</b><asp:Label ID="ID0" runat="server" Text='<%# Bind("ID") %>'></asp:Label>

Answer 3

You'll need to use elements that have display:inline-block then you can use vertical-align:middle
EDIT
I misunderstood the question. You could set a minimum width on your <b> tags, but it's not fully cross-browser:
<style>
p b { min-width: 50px; display:inline-block; }
</style>
<p><b>Foo</b>:</p>
<p><b>Bar</b>:</p>
However, as you're using a table anyway, I'd suggest using the table itself to keep things aligned