web-dev-qa-db-fra.com

Centrer une balise H1 dans une DIV

J'ai la DIV suivante dans une balise body:

<div id="AlertDiv"><h1>Yes</h1></div>

Et ce sont leurs classes CSS:

#AlertDiv {
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;
}

#AlertDiv h1{
    margin:auto;
    vertical-align:middle;
}

Comment puis-je aligner verticalement et horizontalement H1 dans DIV?

AlertDiv sera plus grand que H1.

cssvertical-alignmentalignment
36
VansFannel

Vous pouvez ajouter line-height:51px à #AlertDiv h1 si vous savez que ce ne sera jamais qu'une ligne. Ajoutez également text-align:center à #AlertDiv.

#AlertDiv {
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;
}

#AlertDiv h1 {
    margin:auto;
    line-height:51px;
    vertical-align:middle;
}

La démo ci-dessous utilise également les marges négatives pour conserver le #AlertDiv centré sur les deux axes, même lorsque la fenêtre est redimensionnée.

Démo: jsfiddle.net/KaXY5

37
Marcel

Il y a une nouvelle façon d'utiliser des transformations. Appliquez cela à l'élément à centrer. Il abaisse la moitié de la hauteur du conteneur, puis "corrige" la moitié de la hauteur de l'élément.

position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

Cela fonctionne la plupart du temps. J'ai eu un problème où un div était dans un div dans un li. L'élément de la liste avait une hauteur définie et la divs extérieure était composée de 3 colonnes (Foundation). Les deuxième et troisième divs colonnes contenaient des images et elles étaient parfaitement centrées avec cette technique. Toutefois, l'en-tête de la première colonne nécessitait un div d'emballage enveloppant une hauteur explicite.

Maintenant, est-ce que quelqu'un sait si le personnel de CSS travaille sur un moyen d'aligner facilement des choses, genre? Voyant que 2014 et même quelques-uns de mes amis utilisent régulièrement Internet, je me suis demandé si quelqu'un avait déjà pensé que centrer serait une fonction de style utile. Juste nous alors?

10
Luke Puplett

Sur le tag hX

width: 100px;
margin-left: auto;
margin-right: auto;
7
bluehallu
<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>

Vous pouvez essayer le code ici:

http://htmledit.squarefree.com/

2
Matthew Riches

Vous pouvez ajouter un rembourrage au h1:

#AlertDiv h1 {
  padding:15px 18px;
}
2
kei

Commencé un jsFiddle ici .

Il semble que le alignement horizontal fonctionne avec un text-align : center. J'essaie toujours de faire en sorte que la verticale s'aligne; devra peut-être utiliser absolute positionnement et quelque chose comme top: 50% ou un padding pré-calculé à partir du haut.

2
pixelbobby

Vous pouvez utiliser display: table-cell afin de rendre la div sous forme de cellule de tableau, puis utilisez vertical-align comme vous le feriez dans une cellule de tableau normale.

#AlertDiv {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Vous pouvez l'essayer ici: http://jsfiddle.net/KaXY5/424/

1
Nicu Surdu