我無法將我的面板中的面板置於中央

它們全部顯示爲左對齊。我已經嘗試將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>

來源

2010-01-06 Justen

我不使用ASP，但你試過'保證金： 0 auto;'？ – Strawberry 2010-01-06 17:46:36

在哪個元素上？ – Justen 2010-01-06 17:50:19

設置面板的寬度不是在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" >

來源

2010-01-06 17:51:37 Residuum

好的，所有的面板都是不同的寬度。除非有一個屬性來使寬度適合內部的內容...我是一種新的CSS – Justen 2010-01-06 19:20:41

@Justen：看我的編輯。 – Residuum 2010-01-06 22:47:33

我無法將我的面板中的面板置於中央

回答

相關問題