如何使文本在移动布局中居中？

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>。我删除了一些容器、position: absolute属性和过多的<p>标签，只是将text-align: center属性添加到主容器中，这足以在任何屏幕上对齐文本。.container {&nbsp; text-align: center;}.buttons-row {&nbsp; display: flex;&nbsp; justify-content: center;}<div class="container">&nbsp; <h1>&nbsp; &nbsp; A home is made of&nbsp; &nbsp; <p><i>hopes</i> and <i>dreams</i></p>&nbsp; &nbsp; <p>Let us <i>inspire</i> you to build the perfect home!</p>&nbsp; </h1>&nbsp; <br></div><div class="buttons-row">&nbsp; <a href="/login " class="btn grad1" style="margin-right:20px; font-size:20px; "><b>{{ __('LOGIN') }}</b></a>&nbsp; <a href="/register" class="btn grad1" style="margin-left:20px; font-size:20px;"><b>{{ __('SIGN UP') }}</b></a></div>

Answer 2

尝试向 div 容器添加样式，如下所示：<div&nbsp;class="container"&nbsp;style="align-text:&nbsp;center"></div>