我无法使面板中的面板居中

发布于 2024-08-16 20:26:48 字数 6779 浏览 6 评论 0原文

它们全部左对齐。我尝试将 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>

原文

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: <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 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一梦浮鱼 2024-08-23 20:26:48

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

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 原文

~没有更多了~

关于作者

半衬遮猫

暂无简介

0 文章

0 评论

22 人气

关注发私信

娇女薄笑

文章 0 评论 0

关注

biaggi

文章 0 评论 0

关注

xiaolangfanhua

文章 0 评论 0

关注

rivulet

文章 0 评论 0

关注

我三岁

文章 0 评论 0

关注

薆情海

文章 0 评论 0

友情链接

文江博客

我无法使面板中的面板居中

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

娇女薄笑

biaggi

xiaolangfanhua

rivulet

我三岁

薆情海

友情链接

我无法使面板中的面板居中

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

娇女薄笑

biaggi

xiaolangfanhua

rivulet

我三岁

薆情海

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。