Comment puis-je centrer le texte verticalement dans la dynamique d'une hauteur de la div?

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center;">Text</h1>
    </div>
</body>

Comment puis-je à la verticale du centre de la balise h1 à l'intérieur de la balise div, peu importe quelle est la taille de l'élément div est? c'est à dire Si l'utilisateur change son navigateur hauteur, je veux que le h1 à alignées à la verticale dans le centre, conformément à la nouvelle hauteur.

Grâce.

Peut-être: padding-top: 50%;
Voici un excellent article sur le sujet: phrogz.net/css/vertical-align/index.html

InformationsquelleAutor Albion | 2012-06-07

60

La meilleure solution que j'ai jamais rencontré est de faire usage de la display de la propriété et de l'ensemble de l'enveloppe de l'élément de table pour permettre l'utilisation de vertical-align:middle sur l'élément à être centré:

Voir ce travail Violon Exemple!

HTML
```
<body>
    <div>
        <h1>Text</h1>
    </div>
</body>
```
CSS
```
body {width: 100%; height: 100%;}   /* this is just to "view" the div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}
```
TESTÉ SUR

Windows XP Professional versão 2002 Service Pack 3
- Internet Explorer 8.0.6001.18702
- Opéra 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18.0.1025.168 m
Windows 7 Édition Familiale Service Pack 1
- Internet Explorer 9.0.8112.164211 C
- Opéra 11.62
- Firefox 12.0
- Safari 5.1.4
- Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
- Firefox 12.0
- Chrome 18.0.1025.151 (Développeur Pour Construire 130497 Linux)
- Cela ne fonctionnera pas dans IE7 et inférieur. Mais si ce n'est pas un souci - c'est la meilleure solution. +1
- C'est un mode hors connexion Kiosque ainsi, l'application sera exécutée uniquement dans Firefox. Cette solution a très bien fonctionné dans mon cas. +1
- Je pense que c'est une bonne solution pour la dynamique de la hauteur statique hauteur du conteneur, fonctionne bien.
InformationsquelleAutor Zuul
17

La réponse que j'ai trouver le moins voyant et moins déroutant nécessite l'insertion d'une <span> balise avant le <h1> élément: http://jsfiddle.net/Wexcode/axRxE/

HTML:
```
<div>
    <span></span><h1>Text</h1>
</div>
```
CSS:
```
div { text-align: center; /* horizontally center */ }
div span {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
div h1 {
    vertical-align: middle;
    display: inline-block; }
```
L'expansion de cette technique à la verticale-aligner le navigateur-hauteur: http://jsfiddle.net/Wexcode/axRxE/1/
- Merci pour cette belle solution! J'ai écrit un secours pour les non capable navigateurs ici
- L'espace que vous avez ajouté entre votre <span> et <h1> tags jette hors de la verticale à l'alignement.
- Merci, j'ai corrigé.
- Rien de ce que j'ai trouvé travaillé. Celui-ci est tout simplement génial, merci man!
- Ce sera plus simple par :before pseudo-élément. jsfiddle.net/6kk8yyxk/1
InformationsquelleAutor Wex
4

http://jsfiddle.net/xQBbQ/
```
<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
    </div>
</body>
```
- Qui ne manquera pas de longs textes qui atteignent deux lignes ou plus, reportez-vous à cette simulation avec un <br/> pour forcer la deuxième ligne!
- l'OP n'a pas d'état combien de temps sera le texte. De toute façon l'idée est de définir la hauteur de <h1> et donner une marge négative de la moitié de ce
- Il suffit de pointer un "à venir" de problème! Vous continuez à être de droite, de plus, voici un +1 juste pour le prouver!
InformationsquelleAutor Zoltan Toth
4

J'ai le plus facile des 3 lignes de css qui va souffler votre esprit et vous serez en pensant "Pourquoi n'ai-je pas pensé initialement". L'utiliser sur l'élément que vous souhaitez être positionné à la verticale au centre et le conteneur parent il suffit d'ajouter une hauteur de 100%.
```
position: relative;
top: 50%;
transform: translateY(-50%);
```
La position peut être relative, absolue ou fixe.

InformationsquelleAutor Tom McDonough

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #0c0c0c;
}
.object {
    background-color: #666666;
    height: 350px;
    width: 600px;
}
.verticalCenter {
    width:600px;
    height:350px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
    <div class="verticalCenter">
        <div class="object">cetnered</div>
    </div>
</body>
</html>

Vous devez définir la hauteur et la largeur .verticalCenter classe le même que celui de votre objet (div, flash, image, texte) qui est centrée. Et les marges doivent être de la moitié de ces la hauteur et la largeur.

Je ne pense pas qu'il y est solution si vous modifiez l'objet de façon dynamique. Sauf, peut-être avec les javascripts.

InformationsquelleAutor heroix

1

Voici une solution plutôt simple. C'est surtout basé sur la mise en display:table-cell et le choix d'un alignement vertical, comme le moyen.

HTML:
```
<div id="vertical">
    <p>this text is vertically centered.  It's long enough to wrap, and should work for any size chunk of content.</p>
    <p>Heck, it even works with multiple items in the middle.</p>
</div>
```
CSS:
```
#vertical {
    display:table-cell;
    vertical-align:middle;
    height: 500px;
    width: 300px;
}
```
JSFiddle: http://jsfiddle.net/6Re3E/1/
- display:table-cell ne fonctionne pas dans les vieux IE-s. Qui pourrait être un sujet de préoccupation..
- Vrai, il ne va pas au travail pour IE6 ou 7. Je suis sûr qu'un simple JS solution existe pour IE7. La vie est trop courte pour être inquiet sur IE6.
- Ce site montrent une solution pour les deux, qui est un mélange de nos méthodes (la vôtre a besoin d'un tweak avec un récipient étant centrée au lieu de le contenu brut): boutell.com/newfaq/creating/centervertically.html
InformationsquelleAutor Surreal Dreams
1

Il y a un croix (de bureau) navigateur solution de le faire avec CSS2 + CSS3 et sans Javascript.

Travaille dans
- IE5+
- Gecko (Mozilla, Firefox, Netscape 7)
- Opera 7+
- Konqueror 3+
- Les Navigateurs Webkit (Safari, Google Chrome)
- et beaucoup plus (les navigateurs Mobiles pas testé)
Documentation: Centrage Vertical en CSS Solution Définitive avec Inconnu Hauteur:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Propre jsFiddle Exemple: http://jsfiddle.net/WYgsP/

HTML
```
<div class="outerBox">
    <div class="helper">
        <div class="boxWithUnknownHeight">
            any text<br>
            any height<br>
            any content, for example generated from DB<br>
            everything is vertically centered
        </div>
    </div>
</div>
```
CSS
```
.outerBox {
    display: table;
    height: 400px;
    #position: relative; /* ie hack */
    overflow: hidden;
    border: 1px solid red;
}

.helper {
    #position: absolute; /* ie hack */
    #top: 50%; /* ie hack */
    display: table-cell;
    vertical-align: middle;
}

.boxWithUnknownHeight {
    #position: relative; /* ie hack */
    #top: -50%;
    border: 1px solid green
}
```
Il fonctionne, même si j'ai ajouter du texte et des sauts de lignes grâce à Firebug, etc.

Pour garder votre CSS propre à partir de la non valide CSS Hacks, je vous recommande d'utiliser les commentaires conditionnels pour elle et de créer une CSS avec le navigateur de Code spécifique.

Comment centrage vertical avec des inconnus hauteur exactement qui fonctionne et pourquoi: description Détaillée

D'autres solutions avec display: table et ou display: table-cell et ou de positionnement absolu ici.

InformationsquelleAutor doptrois

J'utilise des tables pour tout. Personnellement, je n'ai pas profiter de l'aide dedisplay: table ou quelque chose comme ça quand il y a quelque chose qui existe déjà.

<table style="width: 100%; height: 100%;">
    <tr>
        <td>
            <!-- Whatever you want vertically and horizontally centered -->
        </td>
    </tr>
</table>

En utilisant cette même méthode, vous pouvez faire quelque chose comme cela pour votre cas:

<div id="container-div" style="position: relative">
    <div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
    <div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td>
                    <!-- Whatever you want vertically and horizontally centered -->
                </td>
            </tr>
         </table>
     </div>
</div>

les gens s'inquiètent de la sémantique des classes ( impressivewebs.com/avoid-nonsemantic-classes ) et que vous êtes en utilisant des éléments du tableau pour la mise en page?
Tant pis, de toute évidence, un vieux commen,t, mais si vous l'êtes toujours, vérifiez ceci: stackoverflow.com/a/84986/2848941

InformationsquelleAutor Superjova

-2

De mon point de vue, divn'est pas un choix approprié dans ce cas. Ma suggestion est d'aller pour table et vertical-align style sur c'est tds.
- Ne pas utiliser un tableau pour les non-données tabulaires.
- Les Tables ne sont pas acceptables du point de vue sémantique à rien, mais les données tabulaires.
- Quel sujet de la structure de la page? Sont tables acceptable?
- C'est plus de solution fiable pour la conception de croix-navigateur.
- Nope. Pour la structure de la page, c'est encore plus mal. Oubliez les tables 🙂
- Bon point pour aujourd'hui. Je ne pense pas que ça. Merci les gars.
InformationsquelleAutor Tooraj Jam

Vous devez vous connecter pour publier un commentaire.

TESTÉ SUR