CODEWITHSUNDEEP
htmlcssasp.net
amza
amza

Reputation: 810

ASP.NET make a panel always centered

I have searched so many threads about this but none of them are working for me. I am not well versed in CSS or HTML at all so I need some guidance.

What I Have:

Currently I have an asp:Panel and this has a bunch of child elements in it (DropDownLists, Buttons, TextBoxes, Labels, etc). All of these elements have their own styles and are absolutely positioned so that they are in the center of the page when the browser is in full screen. I won't post the entire code because it is a complete mess due to my inexperience but it looks like this:

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

What I am Looking For:

When I resize the page I want the all the elements in the Panel to stay in the center of the page to a reasonable amount. Currently when I resize the page they just get "cut-off" once I reach that point. Is there a simply way to accomplish this that a novice could understand?

Some of the many things I have tried: using the style margin properties, setting left and top to fixed percentages, when I set the panel to relative all the panel elements just go off the right of the screen almost completely.

Any direction would be greatly appreciated. Thanks.

Upvotes: 0

Views: 2526

Answers (1)

Andrea
Andrea

Reputation: 849

Absolute positioning is like working inside of a standard 2-D graphing space: it doesn't matter how far out your x- and y-axes extend, (1,2) is always at the exact same place.

Based on your description, much of this absolute positioning is appropriate: use when you have elements that need to stay in the exact same place relative to a container of some sort that will not change size (or where you want elements "pinned" to a part of that container when it does resize).

The issue comes when you are trying to get that containing element to behave itself - to get it centered in the user's screen, no matter what size they have it. You need to set the position property of that container element to "relative" - this tells the browser that any absolutely-positioned elements that are children of your container should be placed relative to the container, NOT relative to the overall screen. This also means that you may have to redo the absolute positioning on those interior elements so that they are based off of the container, not the overall screen.

Assuming the screen size is no less than the exact size of that containing element OR you don't care about horizontal scrolling, you can use margins to center that container:

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

margin: 0 auto; tells the browser not to put any margin on the top/bottom of the container, but for the left/right margins to basically expand them evenly until the space is filled. This means that if you have a 1000px screen, and a container that is 500px, the browser will fill in the l/r margins until you get 250px on each side (250px + 500px + 250px = 1000px). Since it does this on the fly, as a function of what the screen size is, it will re-evaluate those margins each time the screen size changes, so it will always be centered.

tl;dr: add position: relative; and margin: 0 auto; to your outermost container, give it a set width, and you will be fine :)

Upvotes: 2

Related Questions