Avatar billede evilkneivel999 Nybegynder
07. marts 2009 - 16:18 Der er 3 kommentarer

Aligne DIV både vertikalt og horisontalt

Hej

Jeg har et DIV (LoginDialog)  med en login-form, som jeg gerne vil placere i midten af et andet div (LoginContainer) - såvel horisontalt som vertikalt.

Det kan jeg simpelt hen ikke knække på en "pæn" måde. Det SKAL ske i stylen, og heler ikke noget med tabeller. :)

Er der nogen der har løsningen?

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        body
        {
            background-color: black;
        }
        #LoginContainer
        {
            background-color: gray;
            height: 500px;
            width: 100%;
        }
        #LoginDialog
        {
            background-color: White;
            width: 300px;
        }
        #LoginDialog label
        {
            float: none;
            margin: 10px 10px 0px 0;
            display: block;
        }
        #LoginDialog input
        {
            font-size: 20px;
            width: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="LoginContainer">
        <div id="LoginDialog">
            <h1>
                Login</h1>
            <p>
                <label for="txtEmail">
                    E-mail</label>
                <input name="txtEmail" type="text" />
            </p>
            <p>
                <label for="txtPassword">
                    Password</label>
                <input name="txtPassword" type="text" />
            </p>
            <p>
                <input type="submit" name="btnLogin" value="Log in" />
            </p>
        </div>
    </div>
</body>
</html>
Avatar billede zips Juniormester
07. marts 2009 - 19:39 #1
Søg efter dead center :-)

Her er et af de link http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Avatar billede olebole Juniormester
07. marts 2009 - 21:15 #2
<ole>

    <style type="text/css">
        body
        {
            background-color: black;
        }
        #LoginContainer
        {
            background-color: gray;
            height: 500px;
            width: 100%;
        }
        #LoginDialog
        {
            position: relative;
            background-color: White;
            width: 300px;
            height: 234px;
            top: 50%;
            margin: -117px auto 0 auto;
        }
        #LoginDialog label
        {
            float: none;
            margin: 10px 10px 0px 0;
            display: block;
        }
        #LoginDialog input
        {
            font-size: 20px;
            width: 100%;
            margin: 0;
        }
    </style>

/mvh
</bole>
Avatar billede olebole Juniormester
07. marts 2009 - 21:19 #3
Sålænge du har mulighed for at sætte en højde på det div, der skal vertikalt centreres, kan du sætte top til 50% og margin-top til minus den halve højde af elementet.

Et block element centreres horisontalt med margin-værdien 'auto' i siderne. Det resulterer (udover 'position:relative') i:
            height: 234px;
            top: 50%;
            margin: -117px auto 0 auto;
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester