I have 4 <div> element first one is Header, 2nd and 3rd is Middle as right and left panel in the same row with fixed width and heigh and 4th <div> is footer.
How can I align the middle two <div> in the center

<div align="center" style ="background-color :Lime; height :30px">Heading</div>
    
    <div id ="leftAlign" align="center" style ="float:left ; background-color :Fuchsia ; width :45%">Left</div>
    <div id ="rightAlign" align="center" style ="float:left; margin:0px; background-color :Navy ; width :45%">Right</div>
    
    <div align="center" style ="background-color :Lime; clear :both ; height :30px">Heading</div>

Recommended Answers

All 2 Replies

If I understood your question properly, this is what you are looking for:

<div>
        <div style="width: 694px; height: 30px">
            <div style="float: left; text-align: right; width: 340px;">
                <asp:Label ID="Label1" runat="server" Text="User Name:"></asp:Label>
            </div>
            <div style="float: right; width: 340px;">
                <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
            </div>
        </div>
        <div style="width: 694px; height: 30px">
            <div style="float: left; text-align: right; width: 340px">
                <asp:Label ID="Label2" runat="server" Text="Password:"></asp:Label>
            </div>
            <div style="float: right; width: 340px;">
                <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
            </div>
        </div>
        <div style="width: 694px; height: 30px">
         <center>
            <a href="PasswordRecover.aspx">Are you forgot password?</a>    
         </center>
        </div>
    </div>

The div tag that you want centered need to have a defined width, then set the margins to auto. I would surround your two divs that you want centered, give this new div a definite width (no percentages), then sit it's margins to auto.


OR if you're not concerned with deprecated tags or standards, the you can use <center></center> to center things, but this is NOT recommended because it will put IE into quirks mode, and things may misbehave in other browsers as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.