如何将标题包装成两行并将其居中？

如何解决如何将标题包装成两行并将其居中？

h1 {
  text-align: center;
}

<h1>Reliable,efficient delivery Powered by Technology</h1>

我想要的：-

我尝试添加宽度，但随后它会将标题向左推。我怎样才能在中心实现这个多行标题。

解决方法

实现您想要的最简单方法是添加 <br> - The Line Break element。

或者你可以做这样的事情，如果你喜欢css方式https://codepen.io/fromaline/pen/WNpEgXR

h1 {
  text-align: center;
}

<h1>Reliable,efficient delivery <br> Powered by Technology</h1>

,

你可以试试这样的-

#smallheader{
font-size: 50px;
margin-right: 50%;
text-align: center;
margin-left: 50%;
}

<div id="smallheader">This is my text that should be on the next line.</div>

您只需更改 margin-right: your amount;

,

您声称使用宽度不起作用，但它确实起作用（以及标准的居中机制）：

h1 {
  text-align: center;
  width: 400px;
  margin: 0 auto;
}

<h1>Reliable,efficient delivery Powered by Technology</h1>

不过，这不是一个好方法，因为它取决于字体和容器大小。最好明确地打破这一行：

h1 {
  text-align: center;
}

<h1>Reliable,efficient delivery<br>Powered by Technology</h1>