абсолютная середина

Апрель29

Как все мы знаем на вкус и цвет – товарища нет! То есть у разных людей разные вкусы, причем распространяется это абсолютно на все, в том числе и на мониторы. У кого-то стоит дома проектор на всю стену, кто-то пользует компактный ноутбук, а кто-то видит всемирную сеть лишь через экран своего мобильника. И тут встает вопрос – а как узнать какое разрешение у пользователя и как правильно отобразить ему сайт. Для этого существуют различные ухищрения на javascript, но а если Вам нужно просто выровнять что-то по середине, по вертикали и горизонтали?! Тогда Вам поможет старый дедовский способ.

Хоть способ этот довольно старый и достался нам еще от предком, как показывает практика, знают его почему-то не все.

Выравнивание по центру

Создаем таблицу с одной ячейкой и в эту ячейку ложим то, что нам нужно выровнять.

<table>
  <tr>
    <td><img src="Favorite.png"></td>
  </tr>
</table>

Затем растягиваем эту таблицу на всю ширину и высоту экрана и выравниваем содержимое ячейки по горизонтали и вертикали по центру. И вуаля – абсолютно выровненный элемент.

table{width:100%;height:100%;}
td{text-align:center;vertical-align:middle;}

Но! Опасайтесь подводных камней, так при использовании различных доктайпов типа:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

этот способ уже рабоать не будет вот вам и стандарты.

размещено в CSS, HTML

2 Комментариев для

“абсолютная середина”

On Май 20th, 2010 at 22:06 John S. написал:
А блочный элемент также будет по центру находиться?
Семантика предполагает использование таблиц для вывода данных, не для выравнивания контента.
On Май 22nd, 2010 at 07:22 admin написал:
и блочный будет по центру находиться, только ему еще нужно будет margin:auto добавить. А вообще использовать элементы нужно не только исходя из их описания и того, для чего изначально их придумали, а исключительно из удобства использования и возможности проще решать поставленную задачу.