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

h1 {
  text-align: center;
}
<h1>Reliable, efficient delivery Powered by Technology</h1>

我想要什么:-

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

【问题讨论】:

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

标签: html css styles center html-heading


【解决方案1】:

你可以试试这样的-

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

【讨论】:

  • 固定边距不是一种非常现代的方式来做这样的事情。它只适用于一种屏幕尺寸。
  • 别在这里告诉我们。更新你的答案。
【解决方案2】:

您声称使用宽度不起作用,但确实可以(以及标准的居中机制):

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>

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 2015-06-26
      • 1970-01-01
      • 2018-08-03
      • 2011-11-06
      • 2015-12-07
      • 2011-04-24
      • 2011-03-28
      • 2020-03-05
      • 2011-01-02
      相关资源
      最近更新 更多