web-dev-qa-db-fra.com

Comment centrer verticalement un H1 dans un div?

Tout d'abord, mes excuses. Je sais que différentes solutions sont proposées pour ce problème ici, mais pour ma vie, je ne peux en faire fonctionner aucune.

Pour un site web réactif, j'essaie de centrer un h1 dans un div.

Centrer horizontalement n'est pas un problème, mais j'ai du mal à le centrer verticalement. Vraisemblablement, je fais quelque chose de mal ou je comprends mal les explications que j'ai trouvées ici (ou peut-être les deux).

Donc, comme je suis probablement en train d'interpréter les solutions précédentes avec le mauvais sens, quelqu'un pourrait-il s'il vous plaît expliquer ce que je dois ajouter exactement au code ci-dessous pour que le centre h1 se centre verticalement?

(Pour que cette question concerne autant de personnes que possible, j'ai déjà dépouillé le code de toutes mes tentatives précédentes pour le faire moi-même.)

CSS:

html, body {
height: 100%;
margin: 0;
}

#section1 {
min-height: 90%; 
text-align:center
}

HTML:

<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
htmlcssresponsive-design
41
Edward Touw

vous pouvez obtenir un alignement vertical avec display:table-cell:

#section1 {
    height: 90%; 
    text-align:center; 
    display:table;
    width:100%;
}

#section1 h1 {display:table-cell; vertical-align:middle}

Exemple

Mise à jour - CSS3

Pour une alternative à l'alignement vertical, vous pouvez utiliser le CSS 3 suivant qui devrait être supporté par tous les navigateurs les plus récents:

#section1 {
    height: 90%; 
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

violon mis à jour

104
Pete

Vous pouvez y parvenir avec la propriété display:

html, body {
    height:100%;
    margin:0;
    padding:0;
}
#section1 {
    width:100%; /*full width*/
    min-height:90%;
    text-align:center;
    display:table; /*acts like a table*/
}
h1{
    margin:0;
    padding:0;
    vertical-align:middle; /*middle centred*/
    display:table-cell; /*acts like a table cell*/
}

Démo: http://jsfiddle.net/a3Kns/

5
melancia

[~ # ~] html [~ # ~] 

<div id='sample'>
<span class='vertical'>Test Message</span>
</div>

[~ # ~] css [~ # ~] 

    #sample 
    {
        height:100px;
         width:100%;
        background-color:#003366;
        display:table;
        text-align: center;

    }
    .vertical 
    {
           color:white;
         display:table-cell;
        vertical-align:middle;
}

Violon: Démo

1
Amarnath Balasubramanian

J'ai réussi à insérer du texte dans les balises span, puis à placer vertical-align: middle sur cette étendue. Je ne sais pas à quel point c'est compatible avec tous les navigateurs, je ne l'ai testé que dans les navigateurs Webkit.

1
benadamstyles

C'est la méthode jQuery. Cela ressemble à de l'overkill mais il calcule le décalage.

<html>
<head>
<title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/dreamerslab/jquery.center/master/jquery.center.js"></script>
    <script type="text/javascript">
        $(function(){

            $('#jquery-center').center();

        });
    </script>

</head>
<body>
    <div id="jquery-center" style="position:absolute;">
       <h1>foo</h1>
    </div>
</body>
</html>
0
smoore4