Всем привет! На прошлом занятии мы разбирались с циклическими ссылками на сайте и удаляли их с помощью плагина Remove Redundant Links. А сегодня поговорим о выравнивании элементов сайта по центру и атрибуте center.
Ошибка — устарел тег <center>
Если вы читаете эту статью, то наверняка столкнулись с проблемой — устаревший тег <center>. И он, хоть и устарел, продолжает функционировать и делать выравнивание по центру.
Где может скрываться ошибка устаревшего тега center? Например, в виджетах на сайте. Будь то боковая колонка или статья.
Как правило, эту ошибку можно обнаружить при проведении валидации сайта. То есть, при поиске ошибок с помощью сканирования специальной программой.
Смотрим на сайт — всё корректно отображается. Виджеты, как и полагается, расположены по центру колонки. Делаем валидацию — результат выдаёт ошибку.
А всё дело в том, что со временем HTML начал активно взаимодействовать со стилями CSS. И теперь простые и понятные теги <center> и </center> уже неактуальны.
Чем заменить атрибут center
Возникает вопрос — чем же теперь делать центрирование? Всегда есть замена. Теперь выравнивание делается при помощи элементов <div style=»text-align:center»> и </div>. Это будет прямое подключение CSS-свойства в HTML. А вот и пример:
В общем, сложного ничего нет. Остаётся только вспомнить, где на вашем сайте работает старый тег center. Затем скопировать новый атрибут для удобства и сделать замену.
На самом деле, такие ошибки, хоть и мелкие, казалось бы, встречаются часто. Но мы постепенно будем с ними разбираться и устранять.
Здесь стоит также отметить и аналогичное выравнивание по левому и правому краю. Нужно будет сделать замену на <div style=»text-align:left»> и <div style=»text-align:right»> соответственно.
Таким образом, теги форматирования отслужили свой век. А на смену им пришли CSS-свойства. На этом пока всё. До новых встреч, друзья!
Полезное:
Узнайте, как устанавливать и выравнивать элементы в подвале сайта.
Вставьте программный код с интервалами, табуляцией и задайте стили CSS.
Интересные послания:
— Это встроенный или блочный элемент.
— Это всего лишь одна строка текста или несколько строк.
— Он имеет фиксированную ширину и высоту или его размер неизвестен.
— Это вероятно наиболее распространенные вопросы, которые вы должны задать себе, когда хотите центрировать элемент.
Добавьте центрированный текст в середину строки на CSS
Устаревший элемент центра HTML center, это элемент уровня блока, который отображает содержимое на уровне блока или встроенное содержимое по центру горизонтально внутри содержащего его элемента.
Почему тег center устарел в HTML
Этот тег не рекомендуется в HTML 4 и XHTML1 в пользу свойства CSS text-align , которое можно применять к div элементу или к p. Для центрирования блоков, используйте другие свойства CSS, как margin-left и margin-rightи установить их autoили установить margin в 0 auto.
Пример 1
Код
<center>Этот текст будет по центру.
<p>Так же и этот абзац.</p></center>
Пример: #2 CSS альтернативная
Код
<div style=»text-align:center»>Этот текст будет центрирован.
<p>Так же будет этот абзац.</p></div>
Пример: #3 CSS альтернативная
Код
<p style=»text-align:center»>Эта линия будет центрирована.<br>
И так будет эта линия.</p>
It’s intended that markup, i.e. the HTML tags, represent meaning and structure, not appearance. It was badly mixed up in early versions of HTML but the standards people are trying to clean that up now.
One problem with letting tags control appearance is that your pages don’t play well with devices for the handicapped, such as screen readers. It also leads to having lots and lots of tags in your text that don’t help clarify the meaning, but rather clutter it with information of a different level.
So CSS was thought up to move formatting/display to a different language, which is separate from the text and can easily be kept that way. Among other things, this allows switching stylesheets to change the appearance of a Web page without touching the other markup. And to be able to do that for lots of pages in one swell foop.
The tools CSS gives you to do this are not always elegant, I’m on your side there. For instance, there is no way to do effective vertical centering. And horizontal centering, if it’s not just text amenable to text-align, is not much better.
You have the choice of doing easy, effective and muddled or clean, elegant and cumbersome. I don’t understand why Web developers put up with this mess, but I guess they’re happy to have at least a chance to get their stuff done.
0 Пользователей и 1 Гость просматривают эту тему.
- 8 Ответов
- 3974 Просмотров
Чем заменить атрибут align в элемент div? Спасибо!
Вопрос не ясен … 
Записан
Мало открыть человеку глаза,
большинство еще просит указать дорогу
и ждет волшебного пенделя.
заменить class=»align-center»
если вы об этом конечно
.align-center{
text-align: center;
}.align-left{
text-align: left;
}
.align-right{
text-align: right;
}
Записан
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов — мой сайт, телега, Хостинг
Атрибут align=»center» в элемент div, является устаревшим в пользу CSS. Валидатор показывает ошибку и предлагает использовать центрирование на css Как можно отцентрировать ещё?
А можно сайт глянуть
еще как вариант оцентровки самого дива используется margin: 0 auto; но надо смотреть где что использовать!
Записан
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов — мой сайт, телега, Хостинг
чет я убрал в FireBug align=center и у меня ничего не изменилось
но тут вариант с class=»align-center»
.align-center{
text-align: center;
}
точно проканает
тоесть меняем <div class=»align-center»> или просто <div style=»text-align: center»>
Записан
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов — мой сайт, телега, Хостинг
у меня там нет class=»align-center» 
Нужно этот баннер отцентровать Что сдесь нужно поменять?
« Последнее редактирование: 26.08.2012, 16:24:53 от Diki »
Записан
у меня там нет class=»align-center»
так поставьте! <div class=»align-center»> или просто <div style=»text-align: center»> и уберите align=center
Записан
Создание сайтов, интернет-магазинов, оптимизация, продвижение, хостинг, безопасность, лечение от вирусов — мой сайт, телега, Хостинг
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).
In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:
<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">