Интернет, компьютеры, софт и прочий Hi-Tech

Почему не стоит использовать align="center"

Давайте сразу договоримся: излагать для вас огромный учебник по HTML я не стану, не обессудьте. Моя задача: подсказать всего лишь одно простое решение, используемое мною весьма успешно. И применяемое достаточно быстро, чтобы не прекращать радоваться жизни. Смею надеяться, что оно, решение, вам может когда-нибудь пригодиться. Согласны? Значит, поехали.

Раньше всё было просто. Нужно веб-мастеру выровнять картинку по центру страницы — он и вставляет в <img> атрибут align="center". Популярные браузеры понимают данную информацию адекватно, пользователи видят изображение на должном месте, все довольны.

Но то раньше. Теперь же, как сообщалось на сайте браузера Opera в период раздачи очередного свежего релиза, всемирная паутина меняется. Мол, а готовы ли вы к переменам, дорогие друзья.

У пользователей головной боли немного: установили новую версию браузера — и дело в шляпе. А вот веб-мастер вынужден менять свои привычные методы следом за изменениями в вышеуказанной всемирной паутине. В частности, атрибут align="center" объявлен несоответствующим генеральной линии строительства семантического Web, идеологически чуждым для светлого будущего HTML5.

Мы же попытаемся сократить интенсивность головной боли у разработчика веб-страниц до приемлемого минимума.

Вместо атрибута align можно (и отныне даже нужно) обеспечивать выравнивание чего бы то ни было с помощью CSS. (Собственно говоря, складывается впечатление, что HTML5 — это вообще фактически сплошной CSS.) Выровняем по центру содержимое ячеек таблиц. Для этого в каскадный лист стилей (в файл style.css, или как там он у вас называется) добавим строчку:

td { text-align: center;}

Однако предположим, что вам нужно оформить тот или иной элемент вопреки инструкциям для браузера, содержащимся в листе стилей. Если на сайте сто тысяч пятьсот страниц, а отдельное оформление требуется только для какого-то содержимого на одной единственной, то указывать лишние строки в вашем файле style.css ради такой исключительной ситуации бессмысленно.

К счастью, крупицы благоразумия в этом сумасшедшем мире всё же остались: пока ещё работает <div>. Вот в него-то и вставим описание стиля для чего-то, что не должно подчиняться общим правилам:

<div style="text-align: center;"> Элемент страницы </div>

С текстом всё понятно: вместо «Элемент страницы» пишете что вам надо. Заголовок или вроде того. Мы же выровняем по центру картинку. Как? Да точно так же! Вот:

<div style="text-align: center;">
<img src="picture.png" alt="картинка">
</div>

Естественно, кроме text-align: center; можно через точку с запятой указать другие параметры. Хотите, к примеру, сделать отступ, чтобы изображение не лепилось вплотную к соседним элементам страницы? Тогда вставляем padding: 15pt; (значение можно менять). Смотрим:

<div style="text-align: center; padding: 15pt;">
<img src="picture.png" alt="картинка">
</div>

Чем удобен такой способ? Не нужно ради одной страницы прописывать отдельную строку в файле style.css. Тем более что <div> может охватить сразу несколько элементов. То есть, вы сэкономите, возможно, даже не одну строку. В итоге код листа стилей, единого для всего сайта, не будет раздут до неприличия и всячески загромождён.

А как насчёт практики, спросите вы. Всё в порядке, отвечу я вам. Проверено: работает во вполне современных браузерах Google Chrome 13 и Opera 11.51, которые нынче изо всех сил стараются обеспечить поддержку HTML5.

Несомненно, вышеизложенное не является единственным способом адаптации HTML-кода к веяниям времени. Как сказано в самом начале, это всего лишь простой вариант, позволяющий не плодить лишние сущности. Особенно если опыта в создании и оформлении веб-страниц не так уж много.

Автор: vanilinkin, специально для xBB.uz, 25.09.2011

Предыдущие публикации:

Последнее редактирование: 2011-09-25 17:55:00

Метки материала: align, center, использовать align, align=center, язык разметки html, www, интернет, html, css, веб, it, web, internet, информационные технологии, ит, инет, интернет сеть, интернет и www

1 комментарий

Оставьте, пожалуйста, свой комментарий к публикации

Представиться как

Антибот:

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.