VPF::Выравнивание блока по середине по вертикали

fervex

Дата 31.10.2014, 12:45 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 26.8.2006

Репутация: нет
Всего: нет

Здравствуйте! smile

Помогите, пожалуйста, решить задачу! Надо выровнять блок по вертикали по центру свободной области экрана, так чтобы при изменении размера экрана / перевороте экрана блок тоже оставался по середине.
Все условия подробно нарисованы в прикрепленном файле... Файл

Спасибо! smile

Присоединённый файл ( Кол-во скачиваний: 4 )

задача.jpg 72,16 Kb

Gold Dragon

Дата 5.11.2014, 09:40 (ссылка)

(нет голосов)

Загрузка ...

Призрачный

Профиль
Группа: Экс. модератор
Сообщений: 6753
Регистрация: 1.3.2004
Где: Россия, Тамбов

Репутация: 9
Всего: 71

Код


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

        #q1 {
            display: table;
            width: 100%;
            height: 100%;
            background-color: red;
            text-align: center;
        }

        #q1 > div {
            display: table-row;
            width: 100%;
        }

        #q1 > div > div {
            display: table-cell;
            width: 100%;
            padding: 20px;
            vertical-align: middle;
        }

        #q2 > div {
            height: 150px;
            background-color: #aaa;
        }

        #q3 > div {
            height: 100%;
            background-color: #5a5;
        }

        #q3 > div > div {
            background-color: #f5e79e;
        }

        #q4 > div {
            height: 50px;
            border: solid 2px #a55;
        }

Код


<div id="q1">
    <div id="q2">
        <div>что-то такое и ещё что-то вверху</div>
    </div>
    <div id="q3">
        <div>
            <div>
                текст текст текст текст текст текст текст<br>
                текст текст текст текст текст текст текст<br>
                текст текст текст текст текст текст текст<br>
                текст текст текст текст текст текст текст<br>
            </div>
        </div>
    </div>
    <div id="q4">
        <div>что-то такое и ещё много чего-то такого внизу</div>
    </div>
</div>

http://jsfiddle.net/dpoykpp1/

--------------------

Нельзя жить в прошлом, оно уже прошло.
Нельзя жить в будущем, оно ещё не наступило.
Нужно жить в настоящем, помня прошлое и думая о будущем!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »