Как центрировать текст в мобильном макете?

Question

Я создал целевую страницу, которая центрирует текст на нем, и он отлично смотрится на макете рабочего стола, но когда я переключаюсь на макет мобильного устройства, он выглядит так:

Код:

 <div class="container-fluid" style="position: relative; top: 50%;">
                <center>
                    <div class="container" >

                        <h1 >A home is made of <i>
                                             <p >hopes</p>
                            </i> and <i>
                                <p >dreams</p>
                            </i>
                        </h1>


                        <h1>Let us<i>
                                <p >inspire</p>
                            </i> you to build the perfect home!
                        </h1> <br>
                    </div>

                    <a href="/login "  class="btn grad1" style="margin-right:20px; font-size:20px; "><b>{{ __('LOGIN') }}</b></a>
                    <a href="/register"  class="btn grad1" style="margin-left:20px; font-size:20px;"><b>{{ __('SIGN UP') }}</b></a>

                    <div class="container-fluid" style="position: absolute; left:60%; top:-150%;">
                </center>
            </div>
        </div>

Я пытался использовать text-align property для центрирования, но это не меняет выравнивание.

Answer 1

Не могу точно знать, но вы используете много стилей и тегов, которые, кажется, делают ваш макет намного более сложным, вы также используете теги, которые больше не должны использоваться с HTML5 (особенно <center> tag).

Я удалил некоторые контейнеры, свойства position: absolute, лишние теги <p> и просто добавил свойство text-align: center в основной контейнер, и этого достаточно, чтобы выровнять текст на любом экране.

.container {
  text-align: center;
}

.buttons-row {
  display: flex;
  justify-content: center;
}

<div class="container">

  <h1>
    A home is made of
    <p><i>hopes</i> and <i>dreams</i></p>

    <p>Let us <i>inspire</i> you to build the perfect home!</p>
  </h1>
  <br>
</div>

<div class="buttons-row">
  <a href="/login " class="btn grad1" style="margin-right:20px; font-size:20px; "><b>{{ __('LOGIN') }}</b></a>
  <a href="/register" class="btn grad1" style="margin-left:20px; font-size:20px;"><b>{{ __('SIGN UP') }}</b></a>
</div>

Answer 2

Попробуйте добавить стиль в контейнер div следующим образом:

<div class="container" style="align-text: center"></div>