phpjsJqueryhtmlcssblog

Поставить текст по центру/посередине

"text-align: center" Как поставить текст по центру или посередине? Если тег имеет свойство block(либо похожее по свойствам) то любой текст внутри можно поставить по центру.

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

1. Текст по центру/посередине в стилях внутри тега.
2. Текст по центру используя тег style.
3. Текст по центру/посередине в классе.
4. Текст по центру/посередине через id.
5. Почему текст не ставится по центру.

Скопировать ссылку



Текст центру/посередине в стилях внутри блока.

Как вы наверное знаете, что есть "3 способа css" - начнем с простого. Для того, чтобы поставить текст по центру вам понадобится:

Где-то наш текст должен находится, поэтому нам потребуется какой-то тег, пусть это будет div

<div>Текст</div>

Нам нужно attribute style + "text-align: center" :

style="text-align: center;"

Добавим в первый тег "div"

<div style="text-align: center;"> Текст по центру </div>

Больше ничего не нужно!

Пример текст по центру со свойствами внутри тега

Далее нам остается приведенный выше код со свойствами "text-align: center;" разместить прямо здесь на странице:

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

Как видим - текст прекрасно разместился по центру нашего тега!

Скопировать ссылку



Текст по центру используя тег style.

Следующий способ поставить текст посередине - для этого вам понадобится:

Создадим свой собственный тег, пусть это будет "n"

<n>Текст по центру</n>

Нам понадобится style и пропишем нашему тегу "display: block;" + text-align: center;

<style>
n {
display: block;
text-align: center;
}
</style>


Соберем весь код:

Код текста по центру используя тег style

Html:

<n>Текст по центру</n>

Css:

<style>

n {

display: block;

text-align: center;

}

</style>

Пример текста по центру используя тег style

Разместим выше приведенный код "текста по центру" прямо здесь:

Текст по центру
Как видим наш результат, что наш "текст по центру" прекрасно разместился.

Скопировать ссылку



Текст посередине в классе.

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


Нам опять потребуется какой-то тег, и возьмем опять div

<div>Текст по центру</div>

Внутрь первого тега поместим класс с произвольным значением "tekst_poseredine"

class="tekst_poseredine"

Теперь, нам потребуется добавить стилей нашему классу, чтобы текст встал по центру:

<style>
.tekst_poseredine{text-align: center;}
</style>


Соберем весь код:

Код для текста по центру используя класс

Html:

<div class="tekst_poseredine">Текст по центру</div>

Css:

<style>

.tekst_poseredine{text-align: center;}

</style>

Пример размещения текста по центру используя класс

Далее возьмем код "для текста по центру используя класс" и разместим его ниже:

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

Ка видим - наш текст опять замечательно разместился по центру!

Скопировать ссылку



Текст по центру через id.

Следующий атрибут, на котором мы сделаем текст по центру это id - для этого вам понадобится:

Нам нужен опять тег div с текстом:

<div> Текст посередине id </div>

Добавим атрибут "id" внутрь первого тега "div", с произвольным значением "id_text_in_center"

id="id_text_in_center"

Для "id" пропишем стили (id в стилях обозначается как "#"):

<style>
#id_text_in_center{
text-align: center;
}
</style>


Соберем весь код вместе :

Код текста по центру используя id

Html:

<div id="id_text_in_center"> Текст посередине id </div>

Css

<style>

#id_text_in_center{

text-align: center;

}

</style>

Пример текста по центру используя id

Конечно же не id устанавливает текст по центру - это "text-align: center; "

Текст посередине id

Как видим... наш текст прекрасно выводится посередине!

Скопировать ссылку



Почему текст не ставится по центру?

Если например мы возьмем какой-то тег, который имеет в своих свойствах "display:inline", то "text-align: center;" работать не будет!

Пример, когда текст не ставится по центру?

Для того, чтобы продемонстрировать, как текст не ставится по центру -вам понадобится(например):

Тег span

<span>Текст не ставится по центру</span>

Добавим ему attribute style + "text-align: center;"

<span style="text-align: center;">Текст не ставится по центру</span>

Пример, когда текст не становится по центру:

И далее возьмем наш код и поместим его прямо здесь:

Текст не ставится по центру

Как исправить? текст не становится по центру:

Достаточно изменить inline на block...

<span style="text-align: center; display: block;">Текст по центру</span>

Выведем текст по центру:

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

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---