SA Developer .NET

Welcome to SA Developer .NET Sign in | Join | Help
in Search

Noob Question Series #1: Vertical Alignment

Last post 07-25-2008, 15:57 by Raithlin. 5 replies.
Sort Posts: Previous Next
  •  07-22-2008, 14:50 13578

    Noob Question Series #1: Vertical Alignment

    Instead of working around my issues, I'm going to ask about them, and hopefully stimulate some activity on these boards.

    How to I position an element vertically in the middle of another one?  E.g.  How is it possible get my displayLabel positioned in the middle of its parent div without resorting to padding or margins?

        <div style="height:600px; vertical-align:middle; text-align:center;">
            <asp:Label runat="server" ID="displayLabel"></asp:Label>
        </div>

     Currently it renders at the top of the page.


    Unscrambling Eggs: Decompiling ASP.NET
  •  07-22-2008, 16:16 13585 in reply to 13578

    Re: Noob Question Series #1: Vertical Alignment

        <div style="height:600px; vertical-align:middle; text-align:center;">
            <asp:Label runat="server" ID="displayLabel"></asp:Label>
        </div>

    Hi ProfK, I'm scared Tongue Tied I don't know the answer, though I should. Is this a trap?


    I'm going to regret forging this...
  •  07-22-2008, 16:21 13586 in reply to 13585

    Re: Noob Question Series #1: Vertical Alignment

    Orikuuido:

    Hi ProfK, I'm scared Tongue Tied I don't know the answer, though I should. Is this a trap?

    No, legit! 


    Unscrambling Eggs: Decompiling ASP.NET
  •  07-22-2008, 17:03 13589 in reply to 13586

    Re: Noob Question Series #1: Vertical Alignment

    Firefox seems to read this fine, however, IE is being anal.

    <div style="width:760px; height:120px;">
        <div style="width:300px; height:60px; margin:0px auto;">
        </div>
    </div>

    this proportions the inner layer to 0px top auto left/right

    ProfK:

        <div style="height:600px; vertical-align:middle; text-align:center;">
            <asp:Label runat="server" ID="displayLabel"></asp:Label>
        </div>

    in your exampl the div layer has the same width as the inner <input> tag and will not "center" itself to the holding container. middle align won't happen because vertical-align does not know what your upper/lower boundries are. try setting the <input> to be absolutely positioned within the holding container, that would give it a free float?


    'Not everything is binary, if you look closer you might find some hexadecimal in there somewhere'
  •  07-22-2008, 17:16 13590 in reply to 13589

    Re: Noob Question Series #1: Vertical Alignment

    EricTruter:

    this proportions the inner layer to 0px top auto left/right

    The input is centering as I expected but probably coincidentally.

     But, why do you use the term layer?  Does this imply that all elements in some way share the same co-ordinate space, and differ in layer? 


    Unscrambling Eggs: Decompiling ASP.NET
  •  07-25-2008, 15:57 13700 in reply to 13578

    Re: Noob Question Series #1: Vertical Alignment

View as RSS news feed in XML
Powered by Community Server (Commercial Edition), by Telligent Systems