Vertical aligner un bloc

Comment diable centrez-vous verticalement un div?Vertical aligner un bloc

Horizontal a déjà assez de façons, mais peu importe ce que j'essaie, le centrage vertical est tout simplement impossible.

corps {vertical-align: milieu;}

Ne fait rien

corps
{text-align: milieu;}

ne fait rien

div.middle {à p: 50%;}

ne fait rien

est-il possible?

Je pense que je vais pleurer.

Source

2009-12-13 Neros

Voici le résultat final - http: // stackoverflow.com/questions/1890944/html-css-créer-un-div-que-toujours-remplit-la-page-entière-et-puis-un-resizeable/1900027 # 1900027 – Neros

Voir Vertical Centering in CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Universal vertical center with CSS</title> 
    <style> 
    .greenBorder {border: 1px solid green;} /* just borders to ser it */ 
    </style> 
</head> 

<body> 
    <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> 
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> 
     <div class="greenBorder" style=" #position: relative; #top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Source

2009-12-13 11:32:05 cletus

merci, bon code mais, il y a ce putain ' redéfinir la hauteur, donc je suppose qu'il n'y a pas moyen de centrer un bloc pour l'utiliser avec différentes résolutions d'écran? – Neros

Vous pouvez faire la div externe 100% hauteur. Voir http://stackoverflow.com/questions/25238/100-min-height-css-layout – cletus

Le div doit avoir une hauteur fixe afin de le rendre possible, autant que je sache.

#centered { width: 700px; height: 400px; position: absolute; top: 50%; left: 50%; margin: -200px 0 0 -350px; }

Et faire la couche mère de #centered relativement positionné. Cela devrait fonctionner. Éditer - Il est donc possible d'avoir une hauteur indéfinie. Voir la réponse de Cletus.

Source

2009-12-13 11:33:37 Joost

non, vous avez besoin de hauteur définie – Neros

Cela pourrait aider: http://ask.amoeba.co.in/

Source

2009-12-14 09:49:09 Aneeska

sympa, mais je pense que le mien est un peu plus versetile, même si le mien utilise javascript. – Neros

Assurez-vous que votre div externe est "position: relative" OU "position: absolute" (pour un point de référence). 2. Définissez une hauteur fixe pour la division interne. 3. Réglez le div interne sur "top: 50%" pour le déplacer vers le milieu. 4. Et le pas que les gens oublient est de mettre "margin-top: -yy" (-yy est la moitié de la hauteur de la div interne pour décaler la div vers le haut).

Dites que votre div interne a été défini sur height: 100px ;. Le code serait:

<style type="text/css"> 
#outerDiv { position: relative } 
#innerDiv { position: absolute; top: 50%; height: 100px; margin-top: -50px } 
</style>

Source

2012-02-10 09:15:53 Illuin

utilisez Flexible Box Layout Module pour cela. Voici le lien vers le codepen. C'est simple et meilleure solution ce que je ressens. Si vous ne prenez pas soin des navigateurs IE, c'est la meilleure méthode pour aligner les blocs. "Angular Material" utilise également ceci pour faire sa grille.

<div class="center"> 
     <div> 
      <h4> 
        I am at center 
      </h4> 
     </div> 
</div> 


.center { 
     /*this is for styling */ 
     height: 100px; 
     margin: 1em; 
     color:#fff; 
     background: #9f5bd0; 

     /*you just have to use this */ 
     display: flex; 
     justify-content:center; 
     align-items:center; 
}

Pour en savoir 'Mise en page flexible Boîte Module' vous pouvez visiter FLEXBOX FROGGY.

Source

2016-07-22 06:24:40

Vertical aligner un bloc

Répondre

Questions connexes