如何將此元素在頁面上居中？ 我只能在彩色背景中居中文本

Question

它創建的正是我需要的，但我無法以頁面上的整個元素為中心。 居中只會使背景顏色區域內的文本居中。 我究竟做錯了什么？

我嘗試了許多不同的代碼組合，但無法完成這項工作。

與我們一起發展您的業務

<h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px;">GROW YOUR BUSINESS WITH US</h1>

我希望上面的整個元素都以頁面為中心。

Answer 1

您也可以將顯示屬性更改為阻止並向其添加 margin:auto ！ 我把它放在一個 1000px 寬度的 div 中供你查看，但你只需要 h1

 <div style="width:1000px;"> <h1 style="display: block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin:auto;">GROW YOUR BUSINESS WITH US</h1> </div>

Answer 2

您可以在 H1 周圍添加 div 並添加 width 和 margin:auto 之類的

<div style="width:650px; margin: auto;"><h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; ">GROW YOUR BUSINESS WITH US</h1><div>

或者像黃教一樣

<h1 style="text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin: auto;">GROW YOUR BUSINESS WITH US</h1>

Answer 3

這是一個例子

 .container{ width: 100%; height: 100%; border: 1px red solid; display: inline-block; height: 90vw; } .container > div{ width: 150px; /* very impotent */ margin:auto;/* center position */ border:1px #CCC solid; text-align:center; }

 <div class="container"> <div> center div </div> </div>