VPF::Разместить таблицу по центру окна

Wolf1994

Дата 24.6.2007, 13:51 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

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

http://www.wolf-ware.ru/works/eagle/

Как расположить основную таблицу, внутри тэгов "body", по центру, вертикально?

Пробовал:
vertical-align:middle на body
margin:auto на таблицу
- не помогает...

P.S. Страница - онлайн трейнер зрения, написанный, для собственных целей.

SelenIT

Дата 24.6.2007, 14:20 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Лично мне известны два решения:
1) внешняя одноклеточная таблица-контейнер 100%-й высоты;
2) вот такой CSS-финт (тоже с дополнительным контейнером).

Посколько таблицы все равно используются - я бы, наверное, выбрал первый вариант...

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Wolf1994

Дата 24.6.2007, 16:03 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

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

Цитата(SelenIT @ 24.6.2007, 14:20

)

1) внешняя одноклеточная таблица-контейнер 100%-й высоты;

Хмм... Добавил:

Код


<body height="100%">

<table height="100%" style="height:100%;width:100%;background-color:red"><tr><td style="height:100%">

перед основной таблицей, результат - 0 smile

mishaSL

Дата 24.6.2007, 16:17 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

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

Цитата(Wolf1994 @ 24.6.2007, 16:03

)

Хмм... Добавил:

Наверное что-то не так добавили. Вот пример:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">


<head>
  <title></title>
<style type="text/css">
html, body {
    min-height:100%;
    height:100%;
    }
    table.main, table.main td {
        height:100%;
        width:100%;
        }
    table.main td {
        text-align:center;
        vertical-align:middle;
        }
    table.innerTable {
        width:300px;
        margin-left:auto;
        margin-right:auto;
        background-color:#ff0000;        
        }
</style>
</head>

<body>
<table class="main">
    <tr>
        <td>
            <table class="innerTable">
                <tr>
                    <td>
                    текст<br /> текст<br /> текст<br /> текст<br /> текст<br /> текст<br /> текст<br /> текст<br /> текст<br /> текст<br /> 
                    </td>
                </tr>
            </table>

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

</html>

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

Лучший способ научиться программированию - это посмотреть как это делают другие...

WebDisaster

Дата 24.6.2007, 16:29 (ссылка)

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

Загрузка ...

Опытный

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

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

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

Если размер неизменный, можно сделать так:

top: 50%:
margin-top: -(1/2 вертикального размера)px

плюс позиционировать (absolute или relative - нужно смотреть "по месту")

SelenIT

Дата 24.6.2007, 16:45 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Wolf1994, сорри, забыл упомянуть про непременное

Код


html, body { height:100%; }

без которого body со станадартным доктайпом не растягивается на весь экран. Спасибо mishеSL за напоминание.

WebDisaster, это основа способа №2 по моей ссылке;). Причем там приведен вариант и для неизвестной высоты таблицы. "Растяжка" body там также необходима.

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Wolf1994

Дата 24.6.2007, 16:51 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

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

Всем спасибо! Вопрос решён.

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