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

【问题标题】：How can I wrap a heading to two lines and center it?如何将标题包装成两行并将其居中？
【发布时间】：2021-08-15 18:26:33
【问题描述】：

h1 {
  text-align: center;
}

&lt;h1&gt;Reliable, efficient delivery Powered by Technology&lt;/h1&gt;

我想要什么：-

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

【问题讨论】：

那么你在做什么来打破线或限制宽度？请展示你的尝试。不要只是寻求解决方案。
我告诉过你我添加了 width:50%;
我想让你向我们展示这是如何行不通的。我认为是的。
如果你事先不知道你想要换行符在哪里，但你想要一种平衡的标题，所以这两行的长度大致相同，那么请参阅涉及 JS 的答案 [链接]stackoverflow.com/questions/67630381/…

【解决方案1】：

你可以试试这样的-

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

&lt;div id="smallheader"&gt;This is my text that should be on the next line.&lt;/div&gt;

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

【讨论】：

【解决方案2】：

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

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

&lt;h1&gt;Reliable, efficient delivery Powered by Technology&lt;/h1&gt;

不过，这不是一个好方法，因为它取决于字体和容器大小。最好直接断行：

h1 {
  text-align: center;
}

&lt;h1&gt;Reliable, efficient delivery&lt;br&gt;Powered by Technology&lt;/h1&gt;

【讨论】：

【解决方案3】：

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

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

h1 {
  text-align: center;
}

&lt;h1&gt;Reliable, efficient delivery &lt;br&gt; Powered by Technology&lt;/h1&gt;

【讨论】：