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

Question

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

    .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>

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

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

Answer 1

Как вариант.. Мы можем задать для 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>

Answer 2

Выровнять 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 3

Выровнять элемент inline-block по горизонтали без необходимости добавления родительского блока можно так:

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

  position:relative;
  left:50%; 
  transform:translateX(-50%);
  border:1px solid red; /*для видимости*/
}

.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>

Answer 4

Более современный способ:

.title {
  width: fit-content;
  margin: auto;
  text-align: center;
  outline: 1px dotted red;
}

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

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

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

БЛОГ НА HUSL

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

Ответы (4 шт):