Блог

Главная - Вопросы по программированию - «Выравнивание текста по центру» не работает в элементе span

«Выравнивание текста по центру» не работает в элементе span

#html #text-align

Вопрос:

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

Итак, вот весь файл. У меня в нем много вещей, которые не имеют отношения к делу и не важны; просто сосредоточьтесь на коде в двух комментариях.

 <!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>

</script>
</body>
</html>

Часть «Кодируется ежегодными дынями» должна быть в центре, но это не так. По крайней мере, для меня это не так.

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

Я уверен, что просто совершаю глупую ошибку, потому что я уже давно этого не делал, но это не работает… так что да. Я использую Firefox в качестве своего веб-браузера на случай, если это поможет.

Спасибо!

Ответ №1:

<span> Элемент по умолчанию является «встроенным» элементом. Это означает, что в отличие от элементов уровня блока ( <div> <h1> <p> и т.д.), Промежуток занимает столько же горизонтального пространства, сколько и его содержимое.

text-align: center Работает, но вы применяете его к элементу, ширина которого не превышает его содержимого (как и у всех элементов блока).

Я рекомендую либо изменить диапазон на <p> элемент, либо указать display: block свойство в вашем диапазоне.

Вот JSfiddle, чтобы продемонстрировать, что и a <span> с display: block; text-align: center , и a <p> с text-align: center; достигают одного и того же эффекта.

Надеюсь, это поможет!

Ответ №2:

Используйте p или div, а не промежуток. Текст является встроенным элементом, как и промежуток. Чтобы выравнивание текста работало, его необходимо использовать на элементе уровня блока (p, div и т. Д.) Для центрирования встроенного содержимого.

пример:

 <div style="text-align: center">Coded by AnnualMelons</div><br>

Ответ №3:

 .span { 
       text-align: center;
       width: -webkit-fill-available;
      }

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

Ответ №4:

Используйте это в стиле

 margin-left: 50%;

пример-

    <span style="margin-left: 45%;">Centered Text</span>
Метки: