CSS - Как центрировать вложенные div? - PullRequest
Новая
       0

CSS - Как центрировать вложенные div?

6 голосов
/ 07 декабря 2011

Новое в CSS.

Я пытаюсь центрировать вложенные div, используя код ниже

HTML 

<html>
    <head>
        <title>My website</title>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
    </head>
    <body>
        <div id="wrapper">
            <div id="formpanel">
                <div id="loginForm">
                </div>
            </div>
        </div>
    </body>
</html>

CSS 

body {
    margin: 0;
    background : #90ADB7 url('images/background.png') repeat-x;
    font-family: verdana, sans-serif;
    font-size: 0.85em;

}

#wrapper {
    width: 960px;
    margin: 0 auto;
    border-style:solid;
    padding: 190px 0;
}

#formpanel {
    width: 400px;
    height: 400px;
    background-color: yellow;
    margin: auto;
}

#loginForm {
    margin: auto;
    width: 50%;
    height: 50%;
    background-color:blue;
}

проблема в том, что внутренний div (#loginForm) сбрасывается с верхнего края внешнего div (#formpanel). Как мне центрировать внутренний div?

Скриншот enter image description here

Ответы [ 4 ]

5 голосов
/ 07 декабря 2011

Вы можете использовать относительное позиционирование:

http://jsfiddle.net/a879W/

2 голосов
/ 07 декабря 2011 
#formpanel {
    position: relative;
    ...
}

#loginForm {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background-color:blue;
}
1 голос
/ 07 декабря 2011 
#loginForm {
  position:absolute;
  top:25%;
  margin: auto;
  width: 50%;
  height: 50%;
  background-color:blue;
}

РЕДАКТИРОВАТЬ: верх: 25%, а не 50%.

0 голосов
/ 07 декабря 2011

Вы можете использовать абсолютное позиционирование: 

#formpanel {
    width: 400px;
    height: 400px;
    background-color: yellow;
    margin: auto;
    position:relative;
}

#loginForm {
    position: absolute;
    width: 200px;
    height:200px;
    left: 100px;
    top: 100px;
    background-color:blue;
}
...