如何将<h2>居中显示？

Question

我有一个class名称为"headertekst"的

标题文本。我想将其居中。我尝试使用margin-left: auto，margin-right: auto和width: 100％，但没有效果。

我可以使用margin-left: 20％将其居中，但这只是在我的笔记本电脑上。在其他屏幕大小和移动设备上，它将无法居中。

如何以正确的方式将其居中？

- Rick van Baalen

Answer 1

You can just add style in h2 as:

<h2 style="text-align: center;">Text</h2>

- Geshe

Answer 2

h2.headertekst {
  text-align: center;
}

<h2 class="headertekst">Test 1</h2>

- aavrug

---

我宁愿使用他提到的类，因为他想将这个特定的<h2>元素与其他可能的标题区分开来。 - avilac

没错，@avilac。OP正在寻找一种居中元素的方法。他们将使用哪个选择器取决于具体情况。 - Angel Politis

至少将它添加到您的答案中...因为这就是他正在寻找的，尽管您的答案肯定是正确的。 - avilac

@avilac 在这里，我们只是指导任何人或任何人指导我们如何解决任何问题或我们在代码中做错了什么。如果有人在这里提出问题，他知道如何处理这些小事情。你不觉得吗！ - aavrug

@aavrug 我不知道，我在这里时间很短。我的想法是尽可能明确地回答问题，但你可能是对的。 - avilac

Answer 3

您可以使用以下CSS来实现这个效果。

h2 {
    width: 100%;
    text-align:center;
}

或者

header {
    text-align: center;
}
h2 {
    display: inline-block;
}

- Super User

Answer 4

这就是你所需要的：

.headertekst {
   text-align: center;
}

如果您需要使 h2 居中，只需将 text-align: center 规则添加到 h2 标签的父元素即可。

- Tha'er AlAjlouni ثائر العجلوني

Answer 5

<h2 class="headertekst"> centered text </h2>

   .headertekst {
    {
      text-align: center;
      width:100%
    }

- avilac

---

请使用 width:100% 属性，因为如果没有宽度，text-align:center 属性将无法生效。或者将 text-align:center 属性设置到父级 div 上。 - Jishnu V S

@Nalia：h2是块级元素，因此不需要width:100%。 - Andy Tschiersch

@AndyTschiersch 我需要将<h2>更改为<div>吗？我只想居中整个句子，而不仅仅是句子的第一部分。 - Rick van Baalen

在这种情况下，你应该将想要居中的所有元素包裹在一个 div 中，并为该 div 添加一个 class，该 class 的 text-align 属性设置为 center。 - avilac

@avilac 我创建了一个包含<h2>和另一个div的div，但它并不总是居中对齐。我想让标题与https://www.webovo.nl上的标题完全一样。当变量单词的长度发生变化时，整个句子就会跳到居中位置。这就是我要找的。 - Rick van Baalen

当h2嵌入到另一个类中时，这个方法可以起作用。 - Brndn

Answer 6

好的，问题是你标题的最后一部分正在旋转并使用绝对定位。你需要定义三个旋转单词的大致平均宽度。

body {
  background: #363636;
}
.headertekst {
  color: white;
  font-size: 20px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}
.headertekstrotate {
  position: relative;
  display: inline-block;
  padding: 0 0 0 8px;
  width: 150px;
}
.headertekstrotate span {
  animation: clock 12s linear infinite 0s;
  -ms-animation: clock 12s linear infinite 0s;
  -webkit-animation: clock 12s linear infinite 0s;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.headertekstrotate span:nth-child(2) {
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
.headertekstrotate span:nth-child(3) {
  animation-delay: 8s;
  -ms-animation-delay: 8s;
  -webkit-animation-delay: 8s;
}
@keyframes clock {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<h2 class="headertekst">Interlaser is
    <div class="headertekstrotate">&nbsp;
      <span>professioneel.</span>
      <span>voordelig.</span>
      <span>betrouwbaar.</span>
    </div>
</h2>

---

另一种方法：

body {
  background: #363636;
}
.headertekst {
  color: white;
  font-size: 20px;
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}
.headertekstrotate {
  position: relative;
}
.headertekstrotate span {
  animation: clock 12s linear infinite 0s;
  -ms-animation: clock 12s linear infinite 0s;
  -webkit-animation: clock 12s linear infinite 0s;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
}
.headertekstrotate span:nth-child(2) {
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}
.headertekstrotate span:nth-child(3) {
  animation-delay: 8s;
  -ms-animation-delay: 8s;
  -webkit-animation-delay: 8s;
}
@keyframes clock {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<h2 class="headertekst">&nbsp;
    <div class="headertekstrotate">
      <span>Interlaser is short.</span>
      <span>Interlaser is very very long.</span>
      <span>Interlaser is professioneel.</span>     
    </div>
</h2>

- Andy Tschiersch

---

很好，谢谢。理想情况下，我希望文本始终居中，就像在我的另一个网站webovo.nl上所示（“Wij zijn ...”部分）。这样，无论您使用长单词还是短单词，它都会跳到居中位置。您知道如何做到这一点吗？我已将您的CSS和HTML添加到我的网站（interlaser.webovo.nl）中。 - Rick van Baalen

也许我的答案中有其他的方法？ - Andy Tschiersch

不错！你的另一种方法是我迄今为止最接近的了。理想情况下，我希望排除动画的前两个单词，只保留静态。只有最后一个单词需要在跨度之间旋转。你知道如何做到这一点，并将其样式化，使其看起来像一个水平句子吗？就像这样：https://s27.postimg.org/adxgrnaoj/h2_centered.png 。提前感谢！ - Rick van Baalen

Answer 7

添加样式如下：

.headertekst{
  text-align: center;
}

这是一个可工作的片段：

。

.headertekst{
  text-align: center;
}

<h2 class="headertekst">Align this to center</h2>

- Syam Pillai

Answer 8

尝试像这样做些什么。

.headertekst{
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

<h2 class="headertekst">This is Heading</h2>

- Pravin Vavadiya

Answer 9

为什么要使用CSS，我们有center标签，我宁愿说使用center，虽然这是一种旧方法，但它很好。如果你想的话，可以使用CSS。 <center><h2 class="headertekst">这是标题</h2></center>

- Somen Das

Answer 10

试一下这个

 .headertekst
    {
    text-align:center;
    width:100%;
    }

.headertekst
{
  text-align:center;
  width:100%;
  }

<h2 class="headertekst">This is center text</h2>

- sansan