Html table align center не работает

«Баг»-не-баг нецентрирования рисунков атрибутом align=center

Как известно, Хабр использует «олдскульные» атрибуты тегов, допускающие форматирование текста и рисунков в статьях и комментариях авторами. Среди таких тегов оказался один, отсутствующий в стандартах W3C. Это — . Обнаружилось, что часть авторов «наивно» пользуется этим атрибутом, потому что другого редактор Хабра просто не предоставляет. Как ни странно, в части браузеров этот атрибут на Хабре поддерживается, хотя эксперименты с чистыми тестовыми страницами показывают, что чудес нет, в img он не работает.

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

На самом деле, атрибут align=«center» в HTML предназначен для блочных элементов (div, p, . ) и относится не к ним самим, а к внутреннему содержанию элемента. Поэтому, если напишем
то центрирование работать будет (это показано ниже на тестовой странице рисунками с alt=»рис.-под-тест«).

Но этого нельзя написать на Хабре, таковы правила парсера тегов.

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

В большинстве браузеров, кроме Firefox, вторая картинка центрируется (если стили Хабра ещё не исправили), хотя тесты показывают, что этот атрибут браузерами не поддерживается (кроме редких исключений с доктайпами).
Почему же этот неправильный текст не работает везде, но работает на Хабре, причём не в Firefox?

UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.

Посмотрев на стили рисунка, находим причину.

Да, на Хабре в файле all.css поддерживается этот финт превращения неправильного атрибута в «правильный». Именно эти свойства нужно иметь рисунку, чтобы начать центрироваться — быть блоком и центрироваться стилем margin: 0 auto;.

(А ведь те, кто знает, что такого атрибута нет, не могут сами догадаться, что он работает на Хабре — документации нет, тест в Fx не проходит. Я, например, чисто случайно узнал о его существовании, увидев в заметках aleksandrIt (почти в каждой аннотации), посмотрев через Chrome.)

Осталось разобраться, почему центрирование не работает в Firefox.

Дело за малым — тоже посмотреть стили (с помощью Firebug). Здесь обнаруживаем, что атрибут чудесным образом изменился на align=«middle» и даже ручное переименование не помогает его исправить. Браузер сам меняет неправильный атрибут на, «по его мнению», наиболее подходящий (вертикальное выравнивание в потоке строчных элементов). Поэтому правило стилей img[align=«center»] перестаёт работать.

Следовательно, для полной поддержки браузеров на Хабре не хватает правила:

Тест чистой страницы с атрибутами

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

Технические замечания. Ососбенный вид функции применения стилей addRules() вызвано желанием включить в исполнение скрипт в браузере IE8. (В IE9 не проверялось, но должно работать, как в остальных.) Без доктайпа в IE8 не будет работать правило margin: 0 auto, но заработают атрибуты align:right и left.

Что делать?

Такое правило специально для правки ошибки было прописано в стилях Habr ZenComment и независимо от них, в скрипте HabrAjax (Хабр-аджакс), после чего центрирование атрибутом align=«center» стало работать правильно во всех браузерах.

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

UPD 25 янв. 2013 (через год): обнаружилось, что стили Хабра перестали поддерживать этот неправильный атрибут. Для его задействования на сайте пришлось дописать юзерстили так же, как раньше это было сделано для Firefox.

Источник

Как выровнять по центру в CSS

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

Все примеры в этой статье интерактивные. Размеры и расположение элементов в них можно менять. Для этого нужно просто .

Подсказка: наведите курсор на правый нижний угол.

Как в CSS выровнять по горизонтали?

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

text-align: center

Самый быстрый и простой способ выровнять текст или изображение по центру родительского элемента — использовать свойство CSS text-align: center . Чтобы этот метод работал, элементы, которые вы хотите отцентровать, должны иметь свойство display — inline или inline-block , а их родительский элемент должен быть блочным (block или inline-block ). Поэтому если text-align: center не работает, проверьте, все ли в порядке со свойством display .

margin: auto

При помощи свойства margin можно центрировать блочные элементы. Однако margin: auto работает только для выравнивания по горизонтали. К тому же, обязательно должна быть задана ширина ( width , min-width или max-width ). Если ее не задать, блок растянется на всю ширину родительского элемента.

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

Как в CSS выровнять по вертикали?

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

padding или line-height

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

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

Обратите внимание, что значения height и line-height должны быть равными.

vertical-align: middle

Свойство CSS vertical-align выравнивает элемент по вертикали относительно родительского элемента, окружающего текста или ячейки таблицы. Однако с ним не все так просто. Это свойство работает только для inline-элементов (span, img и т.д) и элементов с display: inline-block ;

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

Для того, чтобы этот метод работал, как задумано, нужно задать абсолютные (в px) размеры родительского элемента. У дочернего элемента ширина и высота могут быть относительными (например, в %).

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

transform: translate()

Свойство CSS transform позволяет двигать, вращать, изменять размер и форму элемента. Этот инструмент настоящий must have для создания современных адаптивных и интерактивных дизайнов. Поэтому ему будет посвящена отдельная статья (а может и две 😉

В рамках этой статьи рассмотрим использование свойства transform c функцией translate() в качестве значения. Суть метода сводится к следующему:

Обратите внимание, что родительскому элементу нужно задать position: relative; иначе дочерний элемент будет выравниваться относительно ближайшего родителя с position: relative или, если такого нет, — относительно страницы.

Итак, мы выровняли элемент по центру. Или не совсем по центру? Дело в том, что по центру выравнивается левый верхний угол блока (так сказать, начало его координат). Если блок имеет фиксированный размер и он нам известен, можно сдвинуть его (блок) на расстояние равное половине размера при помощи свойства margin .

Но лучше воспользоваться волшебным свойством transform: translate(-50%, -50%); Оно также сдвигает блок на половину его длины и высоты соответственно, при этом нам не нужно указывать абсолютные размеры. Для адаптивного дизайна то, что нужно!

flexbox CSS

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

Ну а пока вернемся к выравниванию по центру.

Теперь давайте разберемся, что все это значит.

display: flex

При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.

justify-content: center

Это свойство выравнивает содержимое контейнера по центру вдоль основной оси. Одним из ключевых моментов в модели flexbox является ось, вдоль которой располагаются элементы контейнера (свойство flex-direction ). Ось может быть либо горизонтальной ( row или row-reverse ), либо вертикальной ( column или column-reverse ). По умолчанию используется значение row , т.е. наши элементы располагаются по горизонтальной оси слева направо.

align-items: center

Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство align-items описывает, как элементы контейнера расположены относительно нее.

Вот примерно то, что должно получиться.

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

Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с vertical-align: middle и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно cвыровнять текст или картинку по центру горизонтально.

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

Источник

Scott Granneman

Center a table with CSS

The old way to center a table was easy:

The «align» attribute has been deprecated, however, in favor of CSS (Cascading Style Sheets), and this is a good thing. However, it’s not so obvious how to center a table using CSS.

The obvious way might appear to use the CSS «text-align: center;» somewhere, maybe like one of these:

OR, if you get really desperate,

None of these will work. The table itself will be left-aligned, but all the content in the table cells will be centered.

Why? Because «text-align» applies to inline content, not to a block-level element like «table».

Method 1

To center a table, you need to set the margins, like this:

And then do this:

At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well:

Method 2

If you want your table to be a certain percentage width, you can do this:

And then in your HTML/XHTML, you would do this:

Note that I was using an id to describe the table. You can only use an id once on a page. If you had many tables on a page that you wanted to be the same width and centered, you would do this in your CSS:

And this in your HTML:

Method 3

If you want your table to be of fixed width, define your CSS like this:

Set «width:100px» to whatever width you need.

«text-align: center» is there for Internet Explorer, which won’t work without it. Unfortunately, «text-align: center» will center all the text inside your table cells, but we counter that by setting «tr» and «td» to align left.

In your HTML, you would then do this:

Once again, I’m using an id. If you need to center several tables the same way, use a class instead of an id.

Источник

Каскадные таблицы стилей 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

Источник