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

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


html css center centering footer
person Dan    schedule 26.10.2011    source источник
comment
Немного больше информации, пожалуйста? ссылка на пример не помешала бы. и если эта страница вам нужна, проверьте код там. Я не уверен, что это липкий нижний колонтитул, а не просто нижний колонтитул, и зачем вам центрировать нижний колонтитул по вертикали? Или это содержимое над нижним колонтитулом, которое вы хотите центрировать?   -  person benteh    schedule 27.10.2011
comment
Нижний колонтитул, который я имею в виду, находится здесь: ryanfait.com/sticky-footer Он центрирует страницу над нижним колонтитулом. горизонтально, но не вертикально. По сути, я хочу добавить вертикальное центрирование между верхней частью страницы и нижним колонтитулом.   -  person Dan    schedule 31.10.2011
comment
.. так что у вас есть обертка div, которая содержит все, включая нижний колонтитул. Затем у вас есть div, который содержит все, что вы хотите, по центру по вертикали, за вычетом нижнего колонтитула. Это то, что ты имеешь в виду?   -  person benteh    schedule 31.10.2011
comment
Нет ответов для содержимого переменного размера?   -  person Dan    schedule 03.11.2011

Ответы (2)


arrow_upward
5
arrow_downward

Я бы посоветовал ознакомиться со статьей Бобби ван дер Слуиса о нижних колонтитулах в 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>
person Jeremy Carlson    schedule 25.01.2012
comment
Я всегда чувствую себя грязным, используя столы, но я полагаю, что так и должно быть для чего-то подобного. Спасибо! :) - person Dan; 04.12.2012

arrow_upward
0
arrow_downward

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

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

}

person benteh    schedule 31.10.2011
comment
Проблема в том, что я не буду знать размер содержимого, чтобы указать такие абсолютные значения, отсюда и проблема. - person Dan; 31.10.2011