How to center a <h2>? - html

Question

I have an h2 header text with the class name "headertekst". I want to center it. I tried to use margin-left: auto, margin-right: auto and width: 100% but nothing happened.
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.
How do I center it the correct way?

Answer 1

You can just add style in h2 as:
<h2 style="text-align: center;">Text</h2>

Answer 2

h2.headertekst {
text-align: center;
}
<h2 class="headertekst">Test 1</h2>

Answer 3

You can use below css for this
h2 {
width: 100%;
text-align:center;
}
Or
header {
text-align: center;
}
h2 {
display: inline-block;
}

Answer 4

<h2 class="headertekst"> centered text </h2>
.headertekst {
{
text-align: center;
width:100%
}

Answer 5

This is all you need:
.headertekst {
text-align: center;
}
And if you need to center the h2 itself, then just add the text-align: center rule to the parent of the h2 tag.

Answer 6

add style as:
.headertekst{
text-align: center;
}
Here is a workign snippet:
.headertekst{
text-align: center;
}
<h2 class="headertekst">Align this to center</h2>

Answer 7

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">
<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">
<div class="headertekstrotate">
<span>Interlaser is short.</span>
<span>Interlaser is very very long.</span>
<span>Interlaser is professioneel.</span>
</div>
</h2>

Answer 8

Try to something like this.
.headertekst{
left: 0;
right: 0;
width: 100%;
text-align: center;
}
<h2 class="headertekst">This is Heading</h2>

Answer 9

try this
.headertekst
{
text-align:center;
width:100%;
}
.headertekst
{
text-align:center;
width:100%;
}
<h2 class="headertekst">This is center text</h2>

Answer 10

Simply change the Css properties to this:
.headertekst {
width: 100%
display: inline-block;
overflow: hidden;
text-align: center;
}
Reason: Sometimes text-align does not works if there is no width set. And overflow should always be kept hidden in these cases. display: inline-block As its name says: it displays the element in a line in a block. And finally, text-align: center it aligns the text to center.