Установить в середине div внутри другого div - PullRequest
Новая
       1

Установить в середине div внутри другого div

0 голосов
/ 27 октября 2011

У меня есть следующий фрагмент HTML-страницы: 

<div id="main">
    <div id="description">
        Some text
    </div>
</div>

Со следующим CSS: 

#main {
    height:600px;
    vertical-align:middle;
}

#description {
    display:block;
    height:50%;
    width: 50%;
    margin: auto;
    font-size:18px;
}

С этим кодом description div центрируется по горизонтали, но я хочуцентрируйте его вертикально.

Вы знаете, как я могу это сделать?

Ответы [ 4 ]

1 голос
/ 27 октября 2011

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

#main
{
    height: 200px;
    position: relative;
    background-color: lime;
}
#description
{
    width: 50%;
    height: 50%;
    position: absolute;
    left: 25%; /* (100 - width)/2 */
    top: 25%; /* (100 - height)/2 */
    background-color: cyan;
}

Демо здесь

0 голосов
/ 27 октября 2011

Здесь: 

#main {
   height:600px;
   width:600px;
   background-color: blue;
   position: absolute;
}

#description {
   display:block;
   height:50%;
   width: 50%;
   margin: 25% auto;
   position:relative;   
   font-size:18px;
   background-color: red;

}

jsfiddle Здесь

0 голосов
/ 27 октября 2011

Вы можете использовать table-cell - но это поддерживается только в новых браузерах.Я не уверен в номерах версий (но я думаю, что это похоже на IE8 + и FF6 +)

Но если вы не беспокоитесь о совместимости со старыми браузерами, используйте table-cell.В противном случае вы должны использовать отрицательные поля и тому подобное.

Вы можете прочитать об этом здесь: http://phrogz.net/css/vertical-align/index.html

0 голосов
/ 27 октября 2011

Вы можете использовать css display:table-cell напишите так 

 #main {
    height:600px;
    vertical-align:middle;
    display:table-cell;
}

Отметьте это http://jsfiddle.net/sandeep/weGGn/9/

Вы также можете использовать position:absolute, но в этом случае вы должны определить height из этого div.проверить эту статью http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

проверить эту статью http://www.student.oulu.fi/~laurirai/www/css/middle/ может быть, это поможет вашему

...