Горизонтальное и вертикальное центрирование над липким колонтитулом в CSS - PullRequest
Новая
       50

Горизонтальное и вертикальное центрирование над липким колонтитулом в CSS

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

Учитывая липкий нижний колонтитул, такой как на сайте Райана Фейта с фиксированной высотой пикселя, возможно ли центрировать, как по горизонтали, так и по вертикали, содержимое переменного размера в пространстве над этим нижним колонтитулом?

Ответы [ 2 ]

5 голосов
/ 25 января 2012

Я бы посоветовал взглянуть на статью Бобби ван дер Слуиса о нижних колонтитулах в A List Apart .

Пример # 7 в концеего статьи показывает вертикально центрированный блок.Он действительно полагается на сценарии, но он действительно минимален.

edit Вы также можете использовать таблицу из одной ячейки для вертикального центрирования.Включение этого в липкий колонтитул Райана Фейта даст вам что-то вроде этого: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">        

    /* Original Sticky Footer: http://ryanfait.com/sticky-footer/ */

    html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        }

    #footer {
        margin-top: -150px;
        height: 150px;
        }

    #footer {
        background: #bbd;
        }

    .block {
        width: 300px;
        padding: 20px;
        background: yellow;
        margin: 0 auto 150px; /* height of #footer */
        }

</style>
</head>
<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

    <tr><td>

        <div class="block">
            <h1>Vertically Centered!</h1>
            <p>This block will remain centered. Just needs that one table cell wrapping.</p>
        </div>

    </td></tr>
</table>

<div id="footer">Footer Content here</div>

</body>
</html>
0 голосов
/ 31 октября 2011

хорошо, тогда вы можете установить это для вертикального выравнивания контента: 

.verticalalign{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;

}

...