Как выровнять тег a по центру css
Перейти к содержимому

Как выровнять тег a по центру css

  • автор:

Тег HTML выравнивание текста по центру

Тег в HTML используется, чтобы выровнять текст по центру.

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

Тег является устаревшим и не поддерживается в HTML5.

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

В HTML5 выравнивание текста по центру (по середине блока) осуществляется при помощи CSS свойства text-align . Значение center позволяет выровнять текст относительно центра (центрирование). Другие значения: left, right, justify изменяют правило выравнивания на, соответственно, по левому краю, по правому краю и по ширине блока.

Синтаксис

текст

Отображение в браузере

Пример использования в HTML коде




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


текст по центру



текст по центру

Поддержка браузерами

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
Да Да Да Да Да

Атрибуты

Тег не имеет собственных атрибутов, поддерживает глобальные HTML атрибуты.

Как выровнять тег A по центру Li?

введите сюда описание изображения

Делал резиновое меню, все получилось,но не могу опустить пункты меню на середину. Пробовал vertical-align , text-align и ничего не работает.

* < margin:0; padding:0; >div < display:block; >body < background:#444; >header < height:7%; width: 100%; background-color: #FFF; margin: 0 auto; border-bottom: 1px solid #000; >.right < float:left; background-color: #000; width:15%; height:100%; >.menu .left img ul li < width:10%; height:100%; background-color:#669900>a

Отслеживать
задан 29 авг 2016 в 16:47
37 2 2 серебряных знака 6 6 бронзовых знаков
Вы бы хоть скриншот приложили . Совсем ведь не понятно чего вы хотите. Или приложите код HTML & CSS
29 авг 2016 в 16:58
Прошу прощения, уже добавил
29 авг 2016 в 17:02
т.е. вам нужно вертикально отцентрировать цифры в блоке? codepen.io/astor/pen/dXxBrQ
29 авг 2016 в 17:07

Да, благодаря вашим настройкам, все получилось, жаль line-height не отцентровывает в процентах, а не пикселях. Большое спасибо, за помощь!

29 авг 2016 в 17:17

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Строчный элемент внутри блочного можно выравнять вертикально, если задать блочному элементу твердую высоту, например: height: 30px; и line-height: 30px;

Конечно же это только один из множества вариантов вертикального центрирования)).

ul < list-style-type: none; >li < float: left; margin-right: 5px; height: 30px; /* устанавливаем постоянную высоту */ width: 10%; background-color: #669900; text-align: center; line-height: 30px; /* устанавливаем line-height равный высоте элемента */ >a

Отслеживать
ответ дан 29 авг 2016 в 17:18
2,833 3 3 золотых знака 24 24 серебряных знака 44 44 бронзовых знака

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008


по центру CSS

Выравнивание


по центру с помощью CSS, если ее ширина меньше 100%. Горизонтальное выравнивание по центру. Пример:

 hr /> 
 hr 

Примечание: большей частью работает как с float:left, так и с float:none. Однако с float:left самый верный вариант.

Поддержка в браузерах

Windows Internet Explorer 4.01 and 8.0+ Firefox 1.0+ Google Chrome Opera 3.5 — 4.0 and 7.0+ Safari 3.1+ SeaMonkey 1.0+ Mozilla 0.6+ Netscape 4.04+ Linux Firefox 1.0+ Google Chrome / Chromium Opera 7.0+ SeaMonkey 1.0+ NetSurf 3.0+ Hv3 Mozilla 0.6+ Netscape 4.04+

Ещё
  • Position: absolute по центру
  • Изображение по центру CSS

Урок 6. Форматируем текст

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

1. Можно не ставить никакого выравнивания, просто написать текст и он по умолчанию выровняется по левому краю. А можно специально выровнять текст по центру, по левому, по правому краю или по ширине текста. Соответственно, атрибуты, которые для этого нужны:
align =»left» — по левому краю;
align =»center» — по центру;
align =»right» — по правому краю;
align =»justify» — по ширине текста.

Примечание: Если вы хотите поставить текст на страницу, без таблицы (я приводила пример страницы, сделанной без таблицы: как в этой Новеллизации ) — вы просто ставите атрибут выравнивания в тег абзаца:

Выглядеть такой текст будет так:

Текст, выровненный по центру

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

2. Теперь зададим атрибуты самого текста: шрифт, цвет шрифта и размер шрифта. Для этого нужны такие атрибуты:
2.1. font — означает шрифт;
face — лицо, то есть, наименование шрифта в языке HTML. Аналогично для задания стиля используется слово «family», о нём скажем позднее;
Шрифт Arial

2.3. Атрибут size задаёт размер шрифта;
Можно прописать размер шрифта в пунктах:

Но я не рекомендую пользоваться таким способом, потому что размер шрифта будет зависеть от браузера пользователя. Пользователь зашедший с браузера Опера, где по умолчанию стоит масштаб 100%, увидит ваш шрифт font size=»+4″ умеренно крупным и легко читаемым. Пользователь, зашедший с Internet Explorer, на котором по умолчанию стоит «Самые крупные значки» увидит ваш текст просто гигантским и станет думать, не рассчитан ли ваш сайт на слабовидящих.
Лучше задать более точные параметры

Можно прописать размер шрифта при помощи стиля, вот так: STYLE=»font-size:24pt». Если мы зададим размер шрифта 20pt таким способом, то вся строчка будет выглядеть так:
Размер шрифта 20pt.
И зададим одновременно цвет — сиреневый и размер шрифта — 24pt:
Размер шрифта 24pt.

Обратите внимание, что если вы прописываете стиль, то между font и size ставится дефис: font-size.
Слово STILE может относиться не только к шрифту, но и ко множеству других значений. Поэтому если вы прописываете стиль — атрибут, указывающий на то, что вы задаёте стиль именно размера шрифта («font-size: 24pt»), берётся в кавычки весь: STILE=»font-size: 24pt»

Пояснение: Название шрифта вы можете взять либо из соответствующих разделов любых уроков HTML, либо в программе Microsoft Word. Но помните, что далеко не все шрифты отражаются в разных браузерах, поэтому увлекаться экзотическими шрифтами не стоит.

Пояснение 2: цвет шрифта можно задавать и словами (red, blue, green и т.п.), но тогда лучше писать вот так:

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

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

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

3. Пропишем внутрь ячейки тэг с атрибутами, необходимыми для того, чтобы задать параметры нашего текста. Порядок записи атрибутов внутрь тэга не важен. Цвет шрифта я задаю в данном случае — #000000 — чёрный:

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.

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

Но, к сожалению, этот текст будет выглядеть ровно, только в браузерах FireFox и Internet Explorer. В браузере Opera, он будет выглядеть. м-м-м. Как молодой бычок пописал. В общем, очень неровно.
Если вы хотите чтобы ваш текст всегда, во всех браузерах выглядел профессионально, вам нужно прибегнуть к более сложному способу.

Для того, чтобы задать отступ абзаца, нужно прописать для него стиль и назвать его, к примеру, «p1». Я уже объясняла, что стиль начинается с атрибута «style». Только сейчас этот атрибут будет отвечать не за цвет или размер шрифта, а за абзац и отступ текста. Этот стиль нужно записать так:

.p1
<
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
>

Значение text-indent: 1.5em; — это и есть наш отступ. Значения margin и padding мы обнуляем, чтобы никаких лишних отступов в нашем тексте не было.
Теперь нужно вставить значение стиля текста в код страницы, между

.p1
<
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
>

Примечание: поскольку мы уже задали выравнивание по ширине, задав класс текста p1, нам необязательно оставлять выравнивание текста в самой ячейке и значение align =»justify» можно удалить, чтобы не было лишних атрибутов. Или оставить, если вы будете вводить в ячейку ещё текст, но помимо стиля p1, с другими параметрами.
Я задала два абзаца, чтобы результат был более нагляден.
Теперь наш фрагмент с двумя абзацами текста будет записываться так:

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.

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

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.

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

6. Заменяем весь этот HTML-код нашей первой страницы полностью и получается вот что:
Наша первая страница с текстом в центральной ячейке

7. Как видите, получилось не слишком красиво, потому что текст «прилипает» к границам таблички. От этого можно спастись разными способами. Самый привычный — положить текст в ещё одну табличку на одну ячейку, но задать ей border=»0″, а размер не 100%, а 95%. При этом в средней ячейке, в которую мы вставляем эту табличку, для всей ячейки задать выравнивание по центру, чтобы наша табличка с текстом встала строго по центру ячейки. Тогда код будет выглядеть так:

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.

Зелёным цветом я обозначила ещё одну табличку, которую вставила для того, чтобы текст отступил от края основной ячейки.
Единственное, что я забыла — это прописать цвет фона для ячейки таблицы, в которой стоит наш текст. Сделаем это сейчас. Поскольку мы прописываем цвет фона ячейки, а не всей таблицы, то и вставляем мы соответствующий атрибут в тег ячейки (я обозначила вставку жирным шрифтом):

Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *