Как выровнять первую строку текста по центру в CSS (задать для неё одинаковые отступы как на макете)?

Question

Всем привет!

Вот фрагмент моего кода на html и css:

header {
  background-color: #87509c;
  font-family: sans-serif;
  color: #ffffff;
}
    p {
  padding: 147px 97px 67px 97px;
  font-weight: bold;
  font-size: 2.63em;
  text-align: center;
  color: #f7f3ea;
}

<header>
     <p>Hi there! We are the new kids on the block
                    and we build awesome websites and mobile apps.</p>
</header>

Подскажите, как выровнять по центру первую строку текста (задать для неё одинаковые отступы как на макете)?

Answer 1

header {
    display: flex;
    justify-content: center;
    background-color: #87509c;
    font-family: sans-serif;
    color: #ffffff;
}

p {
    padding: 147px 0 67px;
    width: 1000px;
    text-align: justify;
    text-align-last: justify;
    font-weight: bold;
    font-size: 2.63em;
    color: #f7f3ea;
}

Answer 2

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

header {
  min-height: 100vh;
  background-color: #87509c;
  font-family: sans-serif;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

header p {
  font-weight: bold;
  font-size: 3.6vw;
  text-align: center;
  color: #f7f3ea;
  max-width: 80%;
}

<header>
  <p>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</p>
</header>

БЛОГ НА HUSL

Как выровнять первую строку текста по центру в CSS (задать для неё одинаковые отступы как на макете)?

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