Я не могу получить панели внутри моей панели по центру - PullRequest
Новая
       8

Я не могу получить панели внутри моей панели по центру

0 голосов
/ 06 января 2010

Все они выглядят выровненными по левому краю. Я попытался установить тег body в text-align: center, делая div и вокруг главной панели, но не могу заставить его работать. Есть идеи?

Вот мой код CSS: 

.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;
}

А вот мой 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>

1 Ответ

2 голосов
/ 06 января 2010

Установите ширину панелей не в коде ASP.NET, а в декларации CSS, например. 

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

Если вы не хотите устанавливать стиль для всех панелей, но для каждой панели, сделайте что-то вроде: 

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