Question

我有一个h2标题文本，类名为“headertekst”。我想把它集中在一起。我尝试使用margin-left: auto，margin-right: auto和width: 100%，但没有发生任何事情。

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

如何以正确的方式居中？

Answer 1

＆＃13;

funcion rounddec is not defined

＆＃13;

h2.headertekst {
  text-align: center;
}

＆＃13;

Answer 2

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

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

Answer 3

您可以在此下面使用css

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

或

{{1}}

Answer 4

这就是你所需要的：

.headertekst {
   text-align: center;
}

如果您需要将h2本身居中，则只需将text-align: center规则添加到h2代码的父级。

Answer 5

将样式添加为：

.headertekst{
  text-align: center;
}

这是一个workign代码段：

.headertekst{
  text-align: center;
}

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

Answer 6

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

＆＃13;

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

＆＃13;

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

＆＃13;

其他方式：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

尝试这样的事情。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

试试这个

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 9

您只需在h2中添加样式即可：

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

Answer 10

只需将 Css 属性更改为：

.headertekst {
width: 100%
display: inline-block;
overflow: hidden;
text-align: center;
}

原因：如果没有设置宽度，有时 text-align 不起作用。在这些情况下，overflow 应始终隐藏。 display: inline-block 顾名思义：它将元素显示在块中的一行中。最后，text-align: center 将文本居中对齐。

如何居中<h2>？

10 个答案: