如何在我<br/>之后使一条线在中间对齐

Question

例如- <h1>Welcome to the best blog website!<br/> New blog is out!<h1>

这样显示 -

Welcome to the best blog website!
New blog is out!

我希望它像这样显示 -

Welcome to the best blog website!
        New blog is out!

Answer 1

使该元素为 inline-block，然后将文本中心：

h1 {
  display: inline-block;
  text-align: center
}

<h1>Welcome to the best blog website!<br/> New blog is out!</h1>

如果要保持块级别的行为，则可以添加额外的DIV：

h1 {
  display: inline-block;
  text-align: center
}

<div>
  <h1>Welcome to the best blog website!<br/> New blog is out!</h1>
</div>
<p>some text</p>

或使用display:table

h1 {
  display: table;
  text-align: center
}

<h1>Welcome to the best blog website!<br/> New blog is out!</h1>
<p>some text</p>

Answer 2

<blockquote>New blog is out!</blockquote>

如果您想要与代码相同的文本。然后添加标签。

<pre> <blockquote>New blog is out!</blockquote></pre>