VPF::Центрирование блочных элементов

diam

Дата 30.6.2005, 11:08 (ссылка)

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

Загрузка ...

Опытный

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

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

Привет, Винградовцы! smile

Задача. Внутри ячейки вставить новую таблицу и отцентрировать. В качестве примера рассмотрим вывод квадрата размером 150x150 пикселей зелёного цвета в центр экрана.
Решение.

Код


<table style='border-collapse : collapse ; width : 100% ; height : 100%'>
  <tr><td style='padding : 0 ; width : 100% ; text-align : center'>
    <table style='border-collapse : collapse ; margin : 0'><tr>
      <td style='padding : 0 ; background-color : #00FF00 ; width : 150px ; height : 150px'></td>
    </tr></table>
  </td></tr>
</table>

Но при таком решении квадрат будет смещён влево, хотя во второй строчке в стиле ячейки стоит свойство "text-align", значение которого "center" (и которое нормально центрирует текст). Соответственно, что бы отцентрировать таблицу-квадрат, я сделал так:

Код


<table style='border-collapse : collapse ; width : 100% ; height : 100%'>
  <tr><td style='padding : 0 ; width : 100%'><div align='center'>
    <table style='border-collapse : collapse ; margin : 0'><tr>
      <td style='padding : 0 ; background-color : #00FF00 ; width : 150px ; height : 150px'></td>
    </div></tr></table>
  </td></tr>
</table>

Вопрос. Какие свойства CSS использовать, что бы отцентрировать блочные элементы?

Black

Дата 30.6.2005, 11:34 (ссылка)

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

Загрузка ...

Web-Development

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

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

Цитата

Какие свойства CSS использовать, что бы отцентрировать блочные элементы?

Код


text-align: center;

Код


<div align='center'>

Код


<center></center>

(тег устарел, не рекоммендуется)

Больше вроде нету :-) надо их просто ПО-уму использовать.

Если элемент не блочный, то попробоватьсделать его блочным и отцентрировать

Код


<span style='display: block; text-align: center;'></span>

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

Могу все, но ничего не умею :-)

diam

Дата 30.6.2005, 13:27 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(PHP @ 30.6.2005, 11:34)

Больше вроде нету :-) надо их просто ПО-уму использовать.

Про них я знал. На самом деле, можно использовать только CSS и HTML (DIV). HTML(Center) действительно устарел.
Почему-то мне кажется, что нужно использовать CSS, т.е., если у тебя есть выбор - поставить атрибут у элемента или задать его с помощью CSS - не сомневайся, задавай CSS'ом. Но в данном случае CSS не срабатывает. Остаётся один вариант.

Код


<div align='center'>

PHP-DIRECTOR, спасибо! smile

dm9

Дата 30.6.2005, 17:47 (ссылка)

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

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

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

Ответ был неверный. Не Valid XHTML, что есть плохо.

Цитата(diam @ 30.6.2005, 12:08)

Задача. Внутри ячейки вставить новую таблицу и отцентрировать. В качестве примера рассмотрим вывод квадрата размером 150x150 пикселей зелёного цвета в центр экрана.

Правильный ответ:
Внутреннему блочному элемену назначаем стиль {margin-left: auto; margin-right: auto;}. Это работает под все нормальные браузеры, даже под современные ИЕ. Для старого ИЕ (пятого) прописываем содержащему контейнеру {text-align: center}. Вот тогда всё работает.

Это сообщение отредактировал(а) dm9 - 30.6.2005, 20:01

Black

Дата 30.6.2005, 19:25 (ссылка)

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

Загрузка ...

Web-Development

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

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

dm9
помоему выше в твоём посте опечатка smile

dm9
А почему нельзя использовать: text-align: center???

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

Могу все, но ничего не умею :-)

Zaman

Дата 30.6.2005, 19:34 (ссылка)

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

Загрузка ...

Бывалый

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

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

Код


<div align='center'>
    <table style='border-collapse : collapse ; margin : 0'><tr>
      <td style='padding : 0 ; background-color : #00FF00 ; width : 150px ; height : 150px'></td>
    </div></tr></table>

Ты здесь не правильно закрываешь теги, где расположен DIV

попробуй

Код


<div align='center'>
    <table style='border-collapse : collapse ; margin : 0'>
         <tr>
             <td style='padding : 0 ; background-color : #00FF00 ; width : 150px ; height : 150px'></td>
         </tr>
    </table>
</div>

Это сообщение отредактировал(а) Zaman - 30.6.2005, 19:34

dm9

Дата 30.6.2005, 20:03 (ссылка)

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

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

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

Цитата(PHP @ 30.6.2005, 20:25)

помоему выше в твоём посте опечатка

Сэнкю. Исправил.

Цитата(PHP @ 30.6.2005, 20:25)

А почему нельзя использовать: text-align: center???

Видимо, блочные элементы центрировать нельзя. Только inline smile

В принципе, не совсем логично, но своя логика в этом есть.

Black

Дата 30.6.2005, 20:15 (ссылка)

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

Загрузка ...

Web-Development

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

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

dm9 объясни, пожалуйста, как правильно использовать margin-left: auto; margin-right: auto;

Что-то у меня не центрует (проверял в FireFox):

Код


<!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" lang="en" xml:lang="en">
<head>
    <title>.: :.</title>
</head>

<body>
<table style='width: 400px;'>
<tr><td>
<div style='margin-left: auto; margin-right: auto;'>dm9</div>
</td></tr>
</table>
</body>
</html>

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

Могу все, но ничего не умею :-)

Black

Дата 30.6.2005, 20:30 (ссылка)

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

Загрузка ...

Web-Development

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

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

а ... врубился, надо так:

Код


<table style='margin-left: auto; margin-right: auto;'>
<tr><td>
<div>DM9</div>
</td></tr>
</table>

Тогда таблице будет по центру и DM9 тоже.

А как быть в таком случае:

Код


<table style='width: 400px; margin-left: auto; margin-right: auto;'>
<tr><td>
<div>DM9</div>
</td></tr>
</table>

Как теперь в <td> заставить DM9 отобразиться по центру???

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

Могу все, но ничего не умею :-)

dm9

Дата 30.6.2005, 20:36 (ссылка)

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

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

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

Вот так должно работать под все более-менее нормальные браузеры.

Код


<html>
<head>
</head>
<body>
<table bgcolor="orange" width="100%">
    <tr>
        <td style="text-align: center;">
            <div style="margin-left: auto; margin-right: auto; width: 100px; background: green">Dm9</div>
        </td>
    </tr>
</table>
</body>
</html>

Добавлено @ 20:37
http://forum.vingrad.ru/index.php?showtopic=37423

smile

diam

Дата 1.7.2005, 14:57 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(Zaman @ 30.6.2005, 19:34)

Ты здесь не правильно закрываешь теги, где расположен DIV

Я просто здесь описАлся smile

. На самом деле в этом плане всё в порядке.

Добавлено @ 14:58
dm9, спасибо.

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