我有什么：

目前我有一个asp:Panel，其中包含一堆子元素（DropDownLists，Buttons，TextBoxes，Labels等。所有这些元素都有自己的样式，并且绝对定位，以便在浏览器全屏时它们位于页面的中心。我不会发布整个代码，因为我的经验不足，但它看起来很糟糕，但看起来像这样：

<asp:Content ID="Content1" runat="server" contentplaceholderid="MainContent">
    <asp:Panel ID="Panel1" runat="server" Height="220px" HorizontalAlign="Center">
        <div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image ID="Image1" ... />
            </a>
        </div>
        <asp:DropDownList ...></asp:DropDownList>
        <asp:DropDownList ...></asp:DropDownList>
        <asp:Button ... />
        <asp:TextBox ...></asp:TextBox>
        <asp:Label ...></asp:Label>    
    </asp:Panel>
</asp:Content>

我在寻找：

当我调整页面大小时，我希望Panel中的所有元素保持在页面中心的合理数量。目前，当我调整页面大小时，他们只是得到了＃34; cut-off＆＃34;一旦我达到那一点。是否有一种简单的方法来实现这一点，新手可以理解？

我尝试了很多内容：使用style margin属性，将left和top设置为固定百分比，当我将面板设置为relative时面板元素几乎完全脱离屏幕右侧。

任何方向都将不胜感激。感谢。

Answer 1

绝对定位就像在标准二维图形空间内工作一样：x轴和y轴延伸的距离并不重要，（1,2）始终位于完全相同的位置。

根据你的描述，这个绝对定位的大部分是合适的：当你有一些元素需要保持在相对于某种不会改变大小的容器（或你想要的元素和＃的位置）的完全相同的位置时使用34;当调整大小时）固定＆＃34;到该容器的一部分。

当你试图让那个包含元素的行为时，问题出现了 - 让它在用户的屏幕中居中，无论它们有多大的尺寸。您需要将该容器元素的position属性设置为＆＃34; relative＆＃34; - 这告诉浏览器，任何绝对定位的容器子元素都应该相对于容器放置，而不是相对于整个屏幕。这也意味着您可能必须重做这些内部元素的绝对定位，以便它们基于容器，而不是整个屏幕。

假设屏幕尺寸不小于包含元素的确切尺寸，或者您不关心水平滚动，则可以使用边距将该容器居中：

.yourContainer {
     position: relative;
     margin: 0 auto;
}

保证金：0自动;告诉浏览器不要在容器的顶部/底部放置任何边距，但是左/右边距基本上均匀地展开它们直到空间被填满。这意味着如果你有一个1000px的屏幕和一个500px的容器，浏览器将填充l / r边距，直到每边得到250px（250px + 500px + 250px = 1000px）。由于它是动态执行此操作，因此根据屏幕大小的不同，它会在每次屏幕大小更改时重新评估这些边距，因此它将始终居中。

tl; dr：添加位置：相对;和保证金：0自动;到你最外面的容器，给它一个设定的宽度，你会没事的：）

ASP.NET使面板始终居中

我有什么：

我在寻找：

1 个答案: