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

Question

Когда я применяю цвет фона к тексту и пытаюсь центрировать его, цвет фона занимает всю ширину веб-страницы. Я хотел, чтобы цвет bg занимал только размер текста.

HTML

<div class="order">
    <h3>Hello world</h3>
    <h1>How are you doing</h1>
</div>

CSS

.order h3,
.order h1, {
text-align: center;
}

.order h3 {
display: inline-flex;
font-family: Raleway;
color: white;
background-color: var(--main-color);
}

.order h1 {
  font-family: Raleway;
 }

Answer 1

Попробуйте следующий код (используя flexbox ):

.order {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.order h3 {
  font-family: Raleway;
  color: white;
  background-color: blue;
}

.order h1 {
  font-family: Raleway;
  background-color: blue;
}

<div class="order">
    <h3>Hello world</h3>
    <h1>How are you doing</h1>
</div>

Вы можете настроить background-color и добавить его там, где это необходимо.

Answer 2

Для этого предназначен тег <span>.

.order {
    text-align: center;
}

.order h3 > span {
    font-family: Raleway;
    color: white;
    background-color: blue;
}

.order h1 > span {
  font-family: Raleway;
  color: white;
  background-color: blue;
}

<div class="order">
    <h3><span>Hello world</span></h3>
    <h1><span>How are you doing</span></h1>
</div>

Как описано на w3schools.com ;

Тег <span> - это встроенный контейнер, используемый для разметки часть текста или часть документа.

Тег <span> легко оформляется с помощью CSS или манипулируется JavaScript с помощью атрибута class или id.

Тег <span> очень похож на элемент <div>, но <div> является элементом уровня блока, а <span> - встроенным элементом.