Тег center не работает

Чем заменить устаревший атрибут center? Выравнивание элементов

Всем привет! На прошлом занятии мы разбирались с циклическими ссылками на сайте и удаляли их с помощью плагина Remove Redundant Links. А сегодня поговорим о выравнивании элементов сайта по центру и атрибуте center.

Ошибка — устарел тег

Если вы читаете эту статью, то наверняка столкнулись с проблемой — устаревший тег . И он, хоть и устарел, продолжает функционировать и делать выравнивание по центру.

Где может скрываться ошибка устаревшего тега center? Например, в виджетах на сайте. Будь то боковая колонка или статья.

Как правило, эту ошибку можно обнаружить при проведении валидации сайта. То есть, при поиске ошибок с помощью сканирования специальной программой.

Смотрим на сайт — всё корректно отображается. Виджеты, как и полагается, расположены по центру колонки. Делаем валидацию — результат выдаёт ошибку.

А всё дело в том, что со временем HTML начал активно взаимодействовать со стилями CSS. И теперь простые и понятные теги и уже неактуальны.

Чем заменить атрибут center

Возникает вопрос — чем же теперь делать центрирование? Всегда есть замена. Теперь выравнивание делается при помощи элементов

» width=»600″ height=»450″ srcset=»https://ontortuga.ru/wp-content/uploads/2020/02/cen2-300×225.png 300w, https://ontortuga.ru/wp-content/uploads/2020/02/cen2.png 427w» sizes=»(max-width: 600px) 100vw, 600px»/>

В общем, сложного ничего нет. Остаётся только вспомнить, где на вашем сайте работает старый тег center. Затем скопировать новый атрибут для удобства и сделать замену.

На самом деле, такие ошибки, хоть и мелкие, казалось бы, встречаются часто. Но мы постепенно будем с ними разбираться и устранять.

Здесь стоит также отметить и аналогичное выравнивание по левому и правому краю. Нужно будет сделать замену на

Таким образом, теги форматирования отслужили свой век. А на смену им пришли CSS-свойства. На этом пока всё. До новых встреч, друзья!

Полезное:

Узнайте, как устанавливать и выравнивать элементы в подвале сайта.

Вставьте программный код с интервалами, табуляцией и задайте стили CSS.

Источник

Каскадные таблицы стилей CSS советы & приёмы

Смотрите также указатель всех приёмов работы.

Центрирование

В последних реализациях CSS вы можете также использовать возможности Уровня 3 (CSS3), позволяющие выровнять по центру абсолютно позиционированные элементы:

• Выравнивание по вертикали в уровне 3
• Выравнивание по вертикали и горизонтали в уровне 3
• Выравнивание в области просмотра в уровне 3

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке H2 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано:

Вертикальное центрирование

Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне браузера, потому что находится внутри блока, позиционированного абсолютно и по высоте окна.

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

таблица стилей выглядит так:

Основные правила:

1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

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

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

Жёлтый фон наглядно демонстрирует, что абзац действительно той же ширины, что и его содержимое. Мы подразумеваем, что разметка осталась прежней:

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Created 5 May 2001;
Last updated Ср 06 янв 2021 05:40:49

Источник

Почему тег устарел в HTML?

Мне просто интересно узнать, почему тег в HTML был устарел.

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

Кто-нибудь знает какой-либо простой способ сосредоточить «материал» (а не margin-left:auto; margin-right:auto; и width thing), что заменяет ? А также, почему он устарел?

ОТВЕТЫ

Ответ 1

Элемент устарел, поскольку он определяет представление его содержимого — он не описывает его содержимое.

Один метод центрирования состоит в том, чтобы установить свойства margin-left и margin-right этого элемента на auto , а затем установить родительские элементы text-align в свойство center . Это гарантирует, что элемент будет центрироваться во всех современных браузерах.

Ответ 2

HTML — это предоставление структуры и значения для контента, и это должна быть его единственная функция.

Однако существуют различные теги, которые ранее были добавлены глупыми разработчиками браузеров, которые нарушают этот основной принцип.

В какой-то момент люди пришли в себя (частично, по крайней мере), и начали (пытались) согласовать спецификацию для написания правильного HTML, поэтому они не рекомендовали некоторые из этих тегов.

Тем не менее, ущерб уже сделан — слишком много людей узнали, что HTML «помещает теги вокруг вещей и вещей», а не понимает (важное и полезное) различие между семантикой и презентацией, и эти люди пошли дальше писать книги и учебники, обучать других людей неправильному способу писать HTML, которые сами сделали то же самое, и мы закончили с правильным старым беспорядком.

В идеале тег center никогда не должен существовать, потому что люди должны были указывать на него не «реальный» HTML, и сказали разработчикам браузера вернуться и сделать это правильно.

И для этого правильно. выравнивание — это, конечно, проблема с презентацией — применение макета и форматирования к (структурированному) контенту — и язык для этого — CSS.

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

В наши дни мы добавили некоторые полезные функциональные возможности в CSS, но все еще много чего не реализовано, и немало вещей, которые могли быть реализованы по-разному, но теперь стандартизованы так мы застряли со старыми способами.

Если стили были реализованы разумными людьми, у вас были бы все элементы управления, которые у вас есть в любом достойном офисном программном обеспечении — для выравнивания блоков и текста он работал бы горизонтально, вертикально, перевернутый, повернутый и т.д. — и это не было бы сделано глупым способом установки полей слева/справа на авто.

Я добавлю быстро, для полноты, третий «уровень» для веб-страниц, который посвящен добавлению интерактивности к статической странице в противном случае, которая, конечно же, (неправильно названная) JavaScript.

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

Мы, конечно, в последние несколько лет видели большое восстание библиотек JavaScript, которые помогли показать некоторые из классных вещей, которые JS был способен годами, скрывая многие из недостатков браузера, которые все еще существуют в браузерах, и частично помогли исправить поддержку CSS, поэтому он немного полезнее (все еще много чего не хватает).

Итак, давайте подытожим все, что, окончательный ответ заключается в том, что разработчики браузеров были глупы.:)

Ответ 3

Элемент центра устарел в HTML 4.01 и не поддерживается в XHTML 1.0 Strict DTD.

HTML 4.01 spec дает эту причину для устаревания тега:

Элемент CENTER в точности эквивалентен заданию элемента DIV с атрибутом align, установленным в «center».

Ответ 4

То, что я делаю, — это использовать общие задачи, такие как центрирование или плавание, и сделать из них классы CSS. Когда я это делаю, я могу использовать их на любой странице. Я также могу назвать столько, сколько хочу на одном элементе.

Теперь я могу использовать их в своем HTML-коде для выполнения простых задач.

Ответ 5

Вы все еще можете использовать это с XHTML 1.0 Transitional и HTML 4.01 Transitional, если хотите. Единственный другой способ (лучший способ, на мой взгляд) с полями:

Ваш HTML должен определять элемент, а не управлять его представлением.

Ответ 6

Я все еще использую тег, потому что ничего в CSS не работает. Примеры попыток использования

Ответ 7

Он подразумевал, что разметка, т.е. теги HTML, представляют смысл и структуру, а не внешний вид. В ранних версиях HTML он был плохо перепутан, но люди стандартов сейчас пытаются его очистить.

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

Итак, CSS был придуман для перемещения форматирования/отображения на другой язык, который отделен от текста и может быть легко сохранен таким образом. Помимо прочего, это позволяет переключать таблицы стилей, чтобы изменить внешний вид веб-страницы, не касаясь другой разметки. И чтобы иметь возможность делать это для большого количества страниц в одной волне всплеска.

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

У вас есть выбор: делать легкие, эффективные и путаные или чистые, элегантные и громоздкие. Я не понимаю, почему веб-разработчики смирились с этим беспорядком, но я думаю, что они счастливы иметь хотя бы шанс сделать свой материал.

Ответ 8

HTML предназначен для структурирования данных, а не для управления макетом. CSS предназначен для управления макетом. Вы также обнаружите, что многие дизайнеры недовольны использованием

для макетов по этой же причине.

Ответ 9

Для текста и изображений вы можете использовать text-align :

Ответ 10

CSS имеет свойство text-align: center , и поскольку это чисто визуальная вещь, а не семантическая, ее следует отнести к CSS, а не HTML.

Ответ 11

Пища для размышлений: что бы синтезатор текста в речь делал с ?

Ответ 12

Теги центра IMO отлично работают для некоторых вещей и работают от рождения HTML и будут продолжать работать в течение многих лет.

Конечно, есть и другие способы центрирования, большинство из которых не работают, а также тег центра. Также следует отметить, что когда вы центрируете что-то внутри центрального тега, все, что находится за пределами центрального тега, в большинстве случаев получает разрыв строки до и после.

Ответ 13

Он был устаревшим наряду с другими тегами, такими как как элемент стиля. Он не определяет, что такое элемент, но изменяет его внешний вид. W3C хотел, чтобы элементы HTML5 только определяли элементы и удаляли все элементы стиля, чтобы весь стиль выполнялся в CSS или

Ответ 14

Если вы обновляете старый веб-сайт с центральным тегом, то решение ниже может не работать во многих случаях.

метод центрирования состоит в том, чтобы установить margin-left и margin-right свойства элемента в auto, а затем установите родительский элемент text-align свойство в центр.

Следующий метод даст вам точный эквивалент для тега:

Ответ 15

Здесь идет наименее популярный ответ 🙂

«Устаревший» не означает «плохой», и центр не совпадает с div с text-align: center. Даже если бы это было так, было бы абсолютно разумно использовать центр, потому что он очень четко описывает что-то и никому не вредит.

Позвольте мне отреагировать на некоторые моменты против & lt; center>.

«Он описывает представление, а не семантику!» Нет. Он описывает логическое расположение в окружающем контексте и имеет стандартное поведение визуального центрирования. Вы можете переопределить его (так же, как и все остальное), но неплохо иметь значение по умолчанию, например, полужирные заголовки таблиц, курсивный текст для тегов & lt; em>, маркеры для & lt; li> и т.д. Просто факт, что центр центрирует вещи? Это не грех. Это ни в коем случае не причина изгонять тег HTML. Думайте об этом как о семантическом теге, для которого браузер предлагает вам предложение: «эй, я вижу, вы отметили это как центр, я полагаю, вы хотите это в середине? Вы можете сказать мне иначе с помощью css, но пока вы не Я отцентрирую это для тебя! — определенно не то, за что идти в тюрьму.

«Это не верно» Да, это. Это просто устарело, как в «может быть удалено позже». Но это устарело уже более 10 лет, и это все еще здесь. Потому что это полезно.

«Это не поддерживается в HTML5» Покажите мне браузер, который не будет центрировать вещи внутри центрального тега.

«Это oldschool/глупый/неловкий/хромой» Ни один из них. Это как молоток: если вы знаете, что делаете, нет никаких причин не использовать его. Молоток может убить, да, но только если вы используете его неправильно. Для ногтей это просто идеальный инструмент, СДЕЛАНО ДЛЯ ЭТОГО. И даже если у нас есть лучшие инструменты сегодня, это один из хороших.

«Такие вещи должны делать CSS! ВСЕГДА!» Ребята, пожалуйста. Тот факт, что вы можете делать почти все в CSS, не означает, что вы всегда должны использовать CSS для этого. Это хорошо известный стиль, да, разметка и стиль могут быть разделены (в некоторой степени), это хорошо, но это не делает любой другой вариант «плохим выбором».

Кроме того, CSS еще не достаточно умен, и мы все это знаем.

Был спор о таблицах и вертикальном центрировании, это продолжалось более десяти лет. Каждый плевался по всему тегу таблицы, восхваляя сложные CSS-решения для достижения того же самого. Но ни один из них не был достаточно хорош. Затем, к всеобщему удивлению, появилась CSS-сетка, чтобы спасти день — это была первая хорошая альтернатива вертикальному центрированию на основе таблиц. Это так же, как в случае с & lt; center>: там что-то работает определенным образом, и ничто другое не работает точно так же, как это; придет время, когда это будет решено раз и навсегда, возможно, CSS4 будет иметь свойство «centering-method» или что-то подобное, чтобы элементы могли вести себя как центр, но до тех пор это все, что у нас есть. (Интересный факт: CSS-сетки на самом деле намного лучше, чем центральный тег — если вы ищете альтернативу.) Так или иначе, не бойтесь — если вам действительно нужен & lt; center>, используйте его.

Лично я никогда не пользуюсь центром, потому что работаю в команде, а они ненавидят все, что 5+ лет; они также ненавидят все, для чего у них есть более новая возможность. Но это модная вещь. Те же люди, которые не могут стоять в & lt; center>, сразу же примут ваш код, как только вы используете & lt; важный-контент> или любой пользовательский тег: в нем есть черта, это супер-пупер-HTML5, вдруг они полюбят вас для принятия стандартов. Абсолютно нет смысла называть один тег устаревшим, когда вы можете использовать и переопределить любой тег сегодня, но для некоторых из нас, людей, это, по-видимому, логично.

Пусть они будут. Не используйте центр, когда они видят вас. Но не беспокойтесь о поддержке браузера.

Ответ 16

центральный тег больше не используется, просто используйте это

CSS

HTML

Ответ 17

Тег не устарел в стандарте html — по крайней мере, html, который большинство браузеров принимает в качестве стандарта. Вместо этого некоторые люди, которые устанавливают нас как некую власть над Интернетом (и которые не избираются и не могут быть подотчетны нам, как любому другому руководящему органу) говорят нам, что они решили, что НЕ ДОЛЖНЫ использовать определенные теги, потому что они не Мы не используем их.

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

Так как волк и три свиньи — они могут нахлынуть и задохнуться, прыгать вверх и вниз и кричать, и кричать, что мы не можем использовать эти теги, но в реальном мире — браузеры следуют за тем, что хотят пользователи, и поэтому они будут продолжать для поддержки Центра в обозримом будущем.

Таким образом, единственная причина не использовать их — это то, что вы один из людей, которые вынуждены представить свою свободу диктату этих групп, которые считают, что они владеют Интернетом.

Источник