Html 如何将 <h2> 居中？

How to center a <h2>?

提问by Rick van Baalen

I have an h2header text with the class name "headertekst". I want to center it. I tried to use margin-left: auto, margin-right: autoand width: 100%but nothing happened.

我有一个h2类名“headerekst”的标题文本。我想居中。我试图用margin-left: auto，margin-right: auto并且width: 100%但是什么都没有发生。

I can give it a margin-left: 20%which will center it but that's just on my laptop. It will not be centered on other screen sizes and on mobile devices.

我可以给它一个margin-left: 20%将它居中的，但这只是在我的笔记本电脑上。它不会以其他屏幕尺寸和移动设备为中心。

How do I center it the correct way?

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

回答by aavrug

h2.headertekst {
  text-align: center;
}

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

回答by kira

You can just add style in h2 as:

您可以在 h2 中添加样式为：

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

回答by avilac

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

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

回答by Super User

You can use below css for this

您可以为此使用以下 css

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

Or

或者

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

回答by Tha'er M. Al-Ajlouni

This is all you need:

这就是你所需要的：

.headertekst {
   text-align: center;
}

And if you need to center the h2itself, then just add the text-align: centerrule to the parent of the h2tag.

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

回答by Syam Pillai

add style as:

添加样式为：

.headertekst{
  text-align: center;
}

Here is a workign snippet:

这是一个工作片段：

.headertekst{
  text-align: center;
}

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

回答by Andy Tschiersch

Ok, the problem is that the last part of your heading is rotating and position absolute. You have to define an approximate average width of the three rotating words.

好的，问题是标题的最后一部分是旋转和绝对位置。您必须定义三个旋转词的近似平均宽度。

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>

---

---

Other way:

另一种方式：

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>

回答by sansan

try this

尝试这个

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

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

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

回答by Pravin Vavadiya

Try to something like this.

尝试这样的事情。

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

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