Comment faire pour centrer un <h2>?

J'ai un h2 texte d'en-tête avec le nom de la classe "headertekst". Je veux de centre, il n'. J'ai essayé d'utiliser margin-left: auto, margin-right: auto et width: 100% mais rien ne s'est passé.

Je peux lui donner un margin-left: 20% qui centre, mais c'est juste sur mon ordinateur portable. Il ne sera pas centré sur d'autres tailles d'écran et les périphériques mobiles.

Comment puis-je centre de la bonne façon?

Ah center pas pris en charge dans html5 ..
Son remplacement n'a été autour depuis 1996.

InformationsquelleAutor Rick van Baalen | 2017-01-03

css html

15

CSS:
```
h2.headertekst {
  text-align: center;
}
```
HTML:
```
<h2 class="headertekst">Test 1</h2>
```
- Je préfère utiliser la classe il a mentionné, parce qu'il veut différer ce <h2> élément à partir d'autres en-têtes.
- Il suffit d'ajouter la classe et de l'utiliser c'est tout.
- C'est vrai @avilac. L'OP est demandé un moyen de centre de l'élément. Ce sélecteur ils vont utiliser est des cas spécifiques.
- Au moins l'ajouter à votre réponse... Parce que c'est ce qu'il cherche, même si votre réponse est certanly correcte.
- Ici, nous guide quelqu'un ou quelqu'un nous guide sur comment nous pouvons résoudre n'importe quel problème ou ce que nous faisons mal dans notre code. Et si quelqu'un pose une question ici, il sait comment gérer ces choses mineures. Ne pensez-vous pas!
- Je ne sais pas, je suis ici depuis peu de temps. Mon idée est d'être le plus explicite possible avec la réponse, mais vous avez peut-être droit.
- Je pense que le plus de réponses spécifiques sont les mieux, les questions spécifiques aux besoins propres réponses, aussi cette les correctifs de son cas, mais il aura une incidence sur tous les h2 balises dans les pages de son site, ce qui n'est pas préférable je pense.
- Est-ce ok maintenant? 🙂
- Maintenant à la recherche de bon?
- Parce que j'ai une div à l'intérieur d'un <h2>, seule la première partie de la <h2> obtient centré. Comment puis-je centre l'ensemble de la <h2>? J'ai ajouté text-align: center pour ma classe. U peut voir le résultat sur interlaser.webovo.nl.
- Formidable! 😀
- Merci 🙂
- Semble que vous êtes à la recherche de quelque chose d'autre parce que vous avez ajouté opacity:0; à votre balise span et aussi position:absolute;. Aujourd'hui exactement ce que vous recherchez?
- Maintenant, si vous voulez centrer le texte entier, il suffit de retirer le opacity et position absolue et voir le résultat.
- j'ai supprimé l'opacité:0 et position: absolute, mais maintenant, l'animation ne fonctionne pas correctement plus. J'ai besoin de al la rotation des mots sur la même position. (uniquement 'professioneel' est sur la bonne position)
- Pourriez-vous fournir un exemple de travail ou quelque chose d'où l'on peut comprendre exactement ce que vous voulez faire.
- haha désolé, oui je le peux. C'est ce que je veux réaliser: s27.postimg.org/adxgrnaoj/h2_centered.png. Lorsque j'utilise text-align center sur mon <h2> la classe, ce qui se passe: i.imgsafe.org/b73919cdc1.png.
- Ok, donc après avoir fait le texte aligner au centre juste ajouter un display none pour la durée qui vous ne souhaitez pas afficher. Parce que vous étiez à l'aide de l'opacité du texte a été caché, mais elle a été prise de l'espace.
InformationsquelleAutor aavrug
2
```
<h2 class="headertekst"> centered text </h2>

   .headertekst {
    {
      text-align: center;
      width:100%
    }
```
- utilisation width:100% aussi, car il n'est pas de la largeur de la text-align:center propriété, pas de travail , ou d'autres un ensemble text-align:center à la div parent
- h2 est un élément de type block, donc pas besoin width:100%
- Dois-je changer le <h2> dans un <div>? je veux juste le centre de la phrase entière, pas seulement la première partie de la phrase.
- Dans ce cas, vous devez placer tous les éléments que vous voulez centrer à l'intérieur d'un div qui contient une classe avec le text-align: center bien placé.
- j'ai fait un div contenant le <h2> et de l'autre div, mais il n'est pas toujours rester centré. Je veux l'en-tête pour être juste comme sur webovo.nl. Lorsque la longueur de la variable modifications de mots, la phrase entière pour passer à une position centrée. c'est ce que je suis à la recherche d'.
InformationsquelleAutor avilac

Vous pouvez utiliser en dessous de css pour ce

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

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

InformationsquelleAutor Super User

ajouter style:

.headertekst{
  text-align: center;
}

Ici est un workign extrait de:

CSS:

.headertekst{
  text-align: center;
}

HTML:

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

InformationsquelleAutor Syam Pillai

1

C'est tout ce dont vous avez besoin:
```
.headertekst {
   text-align: center;
}
```
Et si vous avez besoin de centre de la h2 lui-même, puis il suffit d'ajouter le text-align: center règle pour le parent de l' h2 tag.

InformationsquelleAutor Tha'er M. Al-Ajlouni

Ok, le problème est que la dernière partie de votre en-tête est en rotation et de la position absolue. Vous devez définir une moyenne approximative de la largeur de trois tournante mots.

CSS:

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

HTML:

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

Autre manière:

CSS:

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

HTML:

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

nice, merci. Idéalement, je veux que le texte soit centré à tout moment, comme je l'ai sur mon autre site webovo.nl (le " Wij zijn ...' partie). Ensuite, il n'a pas d'importance si vous utilisez un mot long ou un court mot, il sera toujours sauter à une position centrée. U ne savez comment faire? j'ai ajouté votre css et html sur mon site (interlaser.webovo.nl)
Peut-être l'autre sens dans ma réponse?
Nice! votre autre moyen est le plus proche que j'ai été encore. Idéalement, je veux les deux premiers mots seront exclus de l'animation et juste pour être statique. Seul le dernier mot, la rotation entre les travées. U ne savent faire que cela se produise et le style de sorte qu'il ressemble à l'horizontale de la phrase? Comme ceci: s27.postimg.org/adxgrnaoj/h2_centered.png . Merci à l'avance!

InformationsquelleAutor Andy Tschiersch

1

Vous pouvez simplement ajouter un style de h2 comme:
```
<h2 style="text-align: center;">Text</h2>
```
InformationsquelleAutor kira

Essayer à quelque chose comme cela.

CSS:

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

HTML:

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

InformationsquelleAutor Pravin Vavadiya

essayer cette

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

CSS:

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

HTML:

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

InformationsquelleAutor sansan

Vous devez vous connecter pour publier un commentaire.