我制作了一個將文本居中的登陸頁面，它在桌面布局上看起來很好，但當我更改為移動布局時，它看起來像這樣：代碼： <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居中，但它不會改變對齊方式。
2 回答
弒天下
TA貢獻1818條經驗 獲得超8個贊
我不能確定，但是您使用了很多樣式和標簽，這似乎使您的布局變得更加困難，您還使用了不應再與 HTML5 一起使用的標簽（特別是標簽）<center>。
我刪除了一些容器、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>
白豬掌柜的
TA貢獻1893條經驗 獲得超10個贊
嘗試向 div 容器添加樣式，如下所示：
<div class="container" style="align-text: center"></div>
- 2 回答
- 0 關注
- 116 瀏覽
添加回答
舉報
0/150
提交
取消