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

您还可以将显示属性更改为block并添加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 like

https://account-d.docusign.com/oauth/auth?
    response_type=YOUR_RESPONSE_TYPE
    &scope=open_id
    &client_id=YOUR_INTEGRATOR_KEY
    &state=YOUR_CUSTOM_STATE
    &redirect_uri=YOUR_REDIRECT_URI
    &admin_consent_scope=YOUR_REQUESTED_SCOPES

或者像黄教一样

<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>

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>

如何在页面上将此元素居中？我只能在彩色背景内居中放置文本

3 个答案: