If you use a label and an input element as block element with CSS, you can’t use vertical-align, border-top, padding-top or margin-top for vertical alignment of the text values.  

image

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Rvl.HelperTools.Website._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <!-- Load css styles -->
    <style type="text/css">
        .Main
        {
            background-color: white;
            margin-left: auto; /* Center mainTable for >= IE6  */
            margin-right: auto; /* Center mainTable for >= IE6  */
        }
        .LeftLabelColumn
        {
            display: block;
            margin-left: 10px;
            margin-right: 10px;
            height: 22px;
            padding-top: 5px;
        }
        .LeftValueColumn
        {
            display: block;
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>

    <script language="javascript" type="text/javascript">
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="Main">
        <div style="float: left; border-top: solid 1px white;">
            <asp:Label ID="Label1" CssClass="LeftLabelColumn" runat="server" Text="Customer"></asp:Label>
            <asp:Label ID="Label2" CssClass="LeftLabelColumn" runat="server" Text="City"></asp:Label>
            <asp:Label ID="Label3" CssClass="LeftLabelColumn" runat="server" Text="Supplier"></asp:Label>
            <asp:Label ID="Label4" CssClass="LeftLabelColumn" runat="server" Text="Products"></asp:Label>
        </div>
        <!-- Because we can't use border-top, margin-top or padding-top on a textbox, we surround the textboxes with div tags -->
        <div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox1" CssClass="LeftValueColumn" runat="server" Text="Microsoft"></asp:TextBox></div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox2" CssClass="LeftValueColumn" runat="server" Text="Redmond"></asp:TextBox></div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox3" CssClass="LeftValueColumn" runat="server" Text="IBM"></asp:TextBox></div>
            <div style="padding-top: 5px;"><asp:TextBox ID="TextBox4" CssClass="LeftValueColumn" runat="server" Text="Windows, Office"></asp:TextBox></div>
        </div>
    </div>
    </form>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.