Как сделать inline block по центру (горизонтали)

Question

Как сделать inline block по центру (горизонтали)

Рейтинг: -1Ответов: 2Опубликовано: 25.02.2023

Сейчас вот так

    .title {
    
    display: inline-block;
    text-align: center;
}

.title p {
font-size: 28px;
}

.title h1 {
font-size: 32px;
text-transform: uppercase;
}

    <div class="title">
        <p>Get a video instruction</p>
        <h1>How to earn your first million</h1>     
    </div>

А хочу чтобы было вот так (текст в красном диве)

Пробовал разные советы из интернета по выравниваню - не помогает (удивите что же мне на этот раз поможет)

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Выровнять inline-block, применяя стили только к нему, нельзя. Единственный вариант - задать выравнивание в родительском блоке.

.title {
  display: inline-block;
  text-align: center;
}

.title p {
  font-size: 28px;
}

.title h1 {
  font-size: 32px;
  text-transform: uppercase;
}

.container{
  text-align:center;
}

<div class="container">
  <div class="title">
    <p>Get a video instruction</p>
    <h1>How to earn your first million</h1>
  </div>
</div>

Answer 2

▲ 0

Как вариант.. Мы можем задать для body display: flex и flex-direction: column, тогда для .title сработает margin со значением auto. Не уверен, что это хороший вариант и он ничего не сломает. Но можно попробовать хотя бы.

.title {
    text-align: center;
    margin: 0 auto;
}

body 
{ 
  display: flex;
  flex-direction: column;
}

.title p {
  font-size: 28px;
}

.title h1 {
  font-size: 32px;
  text-transform: uppercase;
}

<div class="title">
        <p>Get a video instruction</p>
        <h1>How to earn your first million</h1>     
</div>

Как сделать inline block по центру (горизонтали)

Ответы