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

Question

h1 {
  text-align: center;
}

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

我想要的：-

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

Answer 1

实现您想要的最简单方法是添加 <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>

Answer 2

你可以试试这样的-

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

Answer 3

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

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>

How can I wrap a heading to two lines and center it?