Text align center - выравнивание текста по центру

В CSS есть свойство text-align, которое можно использовать для центрирования текста внутри элемента. При указании значения "center" текст будет отцентрирован по горизонтали внутри элемента.

Пример кода:

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs@9.12.0/styles/default.min.css">
  <script src="https://cdn.jsdelivr.net/npm/highlightjs@9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>

<div class="container">
  <p class="centered-text">Этот текст будет центрирован по горизонтали</p>
</div>

<style>
.container {
  width: 500px;
  height: 200px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

</body>
</html>

В данном примере мы создаем контейнер с классом "container", который имеет фиксированную ширину и высоту, а также черную границу. Чтобы центрировать текст по горизонтали, мы используем свойство justify-content со значением "center" в комбинации с свойством display и значением "flex". Это позволяет центрировать содержимое контейнера по горизонтали и вертикали.

Внутри контейнера у нас есть абзац с классом "centered-text". Чтобы текст внутри этого элемента был отцентрирован по горизонтали, мы применяем свойство text-align со значением "center".

Таким образом, текст внутри элемента <p> будет размещен по центру по горизонтали.

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

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

Text align center - выравнивание текста по центру

Похожие вопросы на: "text align center "