Home/ Questions/Q 535431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T09:42:58+00:00

They all appear left aligned. I’ve tried setting the body tag to text-align:center, making

  • 0

They all appear left aligned. I’ve tried setting the body tag to text-align:center, making divs around and in the main panel, but I can’t get it to work. Any ideas?

Here is my CSS code:

.MainPanel {
    background-color:#ccccff;
    margin-bottom:10px;
    margin-top:10px;
}

.MainPanel  div {
    margin-bottom:10px;
    margin-top:10px;
}

.panelSpace {
    margin-bottom:25px;
    margin-top:25px;
}

.buttonWidth { clear: both; }

.buttonWidth  div {
    width:17%;
    float:left;
    margin-left:20px;
}

.centerDiv {
    width:100%;
    text-align:center;
}

And here’s my html:

<body>
    <form id="form1" runat="server">
        <div style="height:100px; text-align:center;"><uc1:Header ID="Header1" runat="server" /></div><br /><br />

        <div>
            <div><asp:Label runat="server" ID="lblErrorMessage" CssClass="lblErrorMessage" /></div>
            <asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px">
            <div class="centerDiv">
                <div>
                    <asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" Width="550" BorderColor="DarkBlue" BorderWidth="2px" >
                    <div>Customer:&nbsp;<asp:DropDownList ID="ddlCustomerList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerList_SelectedIndexChanged" /></div>
                    </asp:Panel>
                </div>

                <span class="panelSpace" />

                <asp:Panel ID="Panel2" runat="server" CssClass="MainPanel" Width="700" BorderColor="DarkBlue" BorderWidth="2px" style="overflow:auto;" >
                    <div>
                        <div class="buttonWidth">
                            <div>
                                <asp:Label ID="lblDataSync" runat="server" Text="Data Sync" /><br />
                                <asp:ImageButton ID="imgDataSync" ImageUrl=".\images\data_sync.bmp" runat="server"
                                                 Width="50px" Height="50px" OnClick="imgDataSync_Click" />       
                            </div>
                            <div>
                                <asp:Label ID="lblEDI" runat="server" Text="EDI" /><br />
                                <asp:ImageButton ID="imgEDI" ImageUrl=".\images\edi.jpg" runat="server" Width="50px"
                                                 Height="50px" OnClick="imgEDI_Click" />
                            </div>
                            <div>
                                <asp:Label ID="lblShipping" runat="server" Text="Shipping/Routing" /><br />
                                <asp:ImageButton ID="imgShipping" ImageUrl=".\images\shipping_routing.jpg" runat="server"
                                                 Width="50px" Height="50px" OnClick="imgShipping_Click" />
                            </div>
                            <div>
                                <asp:Label ID="lblCompliance" runat="server" Text="Compliance/non-Compliant" /><br />
                                <asp:ImageButton ID="imgCompliance" ImageUrl=".\images\compliance_nc.jpg" runat="server"
                                                 Width="50px" Height="50px" OnClick="imgCompliance_Click" />
                            </div>
                            <div>
                                <asp:Label ID="lblLabels" runat="server" Text="Labels"></asp:Label><br />
                                <asp:ImageButton ID="imgLabels" ImageUrl=".\images\shipping_label.jpg" runat="server"
                                                 Width="50px" Height="50px" OnClick="imgLabels_Click" />
                            </div>
                        </div>

                        <div class="buttonWidth">
                            <div>
                                <asp:Label ID="lblManuals" runat="server" Text="Manuals/CustomerLinks" /><br />
                                <asp:ImageButton ID="imgManuals" ImageUrl=".\images\manuals.bmp" runat="server" Width="50px"
                                                 Height="50px" OnClick="imgManuals_Click" />
                            </div>
                            <div>
                                <asp:Label ID="lblPackaging" runat="server" Text="Packaging" /><br />
                                <asp:ImageButton ID="imgPackaging" ImageUrl=".\images\packaging.gif" runat="server"
                                                 Width="50px" Height="50px" OnClick="imgPackaging_Click" />
                            </div>
                            <div>
                                <asp:Label ID="lblTesting" runat="server" Text="Testing"></asp:Label><br />
                                <asp:ImageButton ID="imgTesting" ImageUrl=".\images\testing.jpg" runat="server" Width="50px"
                                                 Height="50px" OnClick="imgTesting_Click" />
                            </div>
                            <div>
                                <asp:Label ID="lblShippingQuickReference" runat="server" Text="Shipping Quick Reference"></asp:Label><br />
                                <asp:ImageButton ID="imgShippingQuickReference" ImageUrl=".\images\ShippingQuickReference.jpg" runat="server" Width="50px"
                                                 Height="50px" OnClick="imgShippingQuickReference_Click" />
                            </div>
                        </div>
                    </div>
                </asp:Panel>

                <span class="panelSpace" />

                <asp:Panel ID="Panel3" runat="server" CssClass="MainPanel" Width="800" BorderColor="DarkBlue" BorderWidth="2px" >
                    <div> 
                        <h2>Recent&nbsp;Updates:</h2>
                        <asp:GridView ID="grdHistory" runat="server">...</asp:GridView>
                        <asp:LinqDataSource ID="ldsHistory" runat="server" ContextTypeName="ComplianceDataContext"
                                            TableName="Histories" OrderBy="CreatedDate desc" />
                    </div>
                </asp:Panel>

                <span class="panelSpace" />

            </div>
            </asp:Panel>
        </div>            
    </form>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Set the width of the panels not in the ASP.NET code, but in the CSS declaration, e.g. 

    .MainPanel {
    background-color:#ccccff;
    margin-bottom:10px;
    margin-top:10px;
    width: 700px; 
}

    If you do not want to set the style for all panels, but for each panel, then do something like:

    <asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" style="width:550px" BorderColor="DarkBlue" BorderWidth="2px" >
    • 0