Aligner verticalement div (pas de tables)

Je peux aligner horizontalement un div et tout le contenu semble agréable. Vous cherchez à aligner verticalement un div qui ne contient pas de tables. J'ai essayé de définir des positions de marge à des valeurs négatives à l'intérieur du #container mais cela a fonctionné. Je sais que CSS ne supporte pas encore cela?Aligner verticalement div (pas de tables)

Voici mon code:

body 
 
{ 
 
    background: #777; /* gray */ 
 
    text-align: center; 
 
} 
 

 
#container 
 
{ 
 
    margin: 0 auto; 
 
    width: 968px; 
 
    text-align: left; 
 
} 
 

 
#toptab 
 
{ 
 
    background: #f77; /* red */ 
 
    height: 14px; 
 
    width: 968px; 
 
} 
 

 
#middletab 
 
{ 
 
    background: #7f7; /* green */ 
 
    width: 968px; 
 
} 
 

 
#data 
 
{ 
 
    width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */ 
 
    padding-left: 10px; 
 
    padding-right 10px; 
 
} 
 

 
#bottomtab 
 
{ 
 
    background: #77f; /* blue */ 
 
    height: 14px; 
 
    width: 968px; 
 
}

<div id="container"> 
 
    <div id="toptab"></div> 
 
    <div id="middletab"> 
 
     <div id="data"> 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
     </div> 
 
    </div> 
 
    <div id="bottomtab"></div> 
 
</div>

Exécutez l'extrait ci-dessus et cliquez sur "pleine page" pour voir à quoi il ressemble actuellement. Fondamentalement, il a l'air bien horizontalement, mais maintenant j'ai besoin de le centre aussi verticalement dans la page.

L'élément que je veux aligner verticalement est le div #container. L'effet forcerait l'ensemble du div et de tous les sous-divs non seulement à être alignés horizontalement mais aussi verticalement. Je sais que c'est possible et je sais qu'Andy Budd a posté une telle solution, mais cela ne semble pas fonctionner pour moi.

Source

2009-12-15 JonH

Voulez-vous dire verticalement distribué/justifié ou centrer tout ce qui est affiché verticalement dans la page? –

@Eric le résultat final est la boîte circulaire avec le contenu devrait être au milieu de la page. Pour le moment, comme vous le voyez, le contenu est centré mais centré uniquement sur le sommet. Je dois le centrer directement au milieu de la page. – JonH

Pour autant que je l'ai vu, vous devez faire un peu de javascript sauf si vous voulez une page à hauteur fixe, dont je doute. –

À moins que vous n'ayez la possibilité de définir explicitement la hauteur de votre conteneur (ce qui n'est pas le cas), il n'y a pas de solution pour centrer verticalement votre conteneur DIV.

L'utilisation d'une table est complètement viable, mais vous avez noté que cela ne peut pas être utilisé.

Si javascript est une option, nous pourrions facilement y remédier pour vous. Un plugin jQuery existe déjà pour aligner verticalement un conteneur.

(function ($) { 
    // VERTICALLY ALIGN FUNCTION 
    $.fn.vAlign = function() { 
     return this.each(function(i){ 
      var ah = $(this).height(); 
      var ph = $(this).parent().height(); 
      var mh = (ph - ah)/2; 
      $(this).css('margin-top', mh); 
     }); 
    }; 
})(jQuery);

Et vous aligner verticalement un bloc DIV comme ceci:

$('#example').vAlign();

Taken de Simple Vertical Align Plugin.

Source

2009-12-15 19:36:16

@cballou Il n'y a aucun moyen que je sois capable de dire la hauteur du conteneur, ça pourrait varier :(. Mais si je suppose que le maximum sera de 500px, utiliser le balisage fourni, que puis-je faire? – JonH

J'ai essayé sans succès #container { \t margin: 0 auto; \t largeur: 968px; \t text-align: left; \t position: absolue; \t en haut: 50%; \t gauche: 50%; \t hauteur: 484px; \t marge supérieure: -9em;/* défini sur un nombre négatif 1/2 de votre hauteur */ \t marge gauche: -15em;/* définit un nombre négatif 1/2 de votre largeur */ } – JonH

@JonH: Si elle n'a pas de hauteur * fixe *, vous ne pourrez pas la faire verticalement sans javascript. –

Jetez un oeil à Vertical Centering With CSS ou Vertically center content with CSS ou CSS Vertical Centering. La méthode 3 de la première référence est la même que CSS vertical center using float and clear.

Et il est sûrement une bonne idée de tester le résultat avec un service comme browsershots.org

EDIT: Je modifié votre CSS et le balisage pour implémenter la méthode 3:

css:

* { 
    margin:0; 
    padding:0; 
} 

html, 
body { 
    height: 100%; 
} 

body { 
    text-align:center; 
} 

#floater { 
    float: left; 
    height:50%; 
    margin-bottom: -100px; 
} 

#container 
{ 
    clear:both; 
    position: relative; 
    margin: 0 auto; 
    width:968px; 
    text-align: left; 
    height: 200px; 
} 

...

balisage:

<body> 
<div id="floater"></div> 
<div id="container"> 

...

L'inconvénient que je vois dans cette méthode est que avec CSS, vous devez savoir à l'avance la hauteur de votre contenu, de sorte que vous pouvez appliquer une marge négative de la moitié de cette hauteur au flotteur. Dans l'exemple, j'ai choisi 200px.

See it in action.

Source

2009-12-15 19:31:23

Je n'ai pas besoin d'articles que j'ai lu beaucoup. Je n'arrive pas à le faire fonctionner avec des valeurs de marge négatives. – JonH

Si themeforest n'est jamais disponible, cette réponse sera inadéquate. Cela vous dérange-t-il de migrer les instructions dans votre réponse et de donner du crédit aux auteurs originaux. De cette façon, les gens n'ont pas à rebondir de page en page pour peser la valeur de votre réponse? – Sampson

@JonH> donner un homme un poisson ... –

Il y a plusieurs façons de le faire, le tout avec des compromis.

utilisation position:absolute, une hauteur fixe, et overflow:auto.
Utilisez display:table, display:table-cell et vertical-align:middle
Utilisez javascript

Je pense que l'option 2 est assez bonne.

edit: Je ne pense pas que l'option 2 fonctionnera dans IE. Vous pouvez être bloqué avec javascript si vous voulez garder la hauteur dynamique.

Source

2009-12-15 19:35:40

Compromis cross compatibilité navigateur: toute la famille IE pour être précis. –

@cballou, ya Je viens juste de penser à ça et je suis en train d'éditer mon post alors que tu laissais ton commentaire: P –

Si la hauteur de votre conteneur principal est fluide, votre seul choix fiable est d'utiliser JavaScript ("fiable" est discutable ici, bien sûr). En JavaScript, vous devez d'abord trouver la hauteur du conteneur, puis la hauteur de la fenêtre et ajuster le décalage supérieur en conséquence. Voici comment vous le feriez dans jQuery:

$(function() { 
    $(window).resize(function() { 
     var top = $(window).height()/2 - $('#content').height()/2; 
     top = top < 0 ? 0 : top; 
     $('#content').css('top', top); 
    }); 
    $(window).resize(); 
});

Et le CSS pour le faire fonctionner:

#content { 
    position: absolute; 
    /* Everything else is optional: */ 
    width: 960px; 
    margin: 0 auto; 
}

Et le code HTML:

... 
<body> 
    <div id="#content">Content here</div> 
</body> 
</html>

C'est encore assez simple, et la volonté travailler si l'utilisateur a JavaScript activé.

Source

2009-12-15 19:46:20

Mon seul reproche avec cette fonction est que cela ne fonctionnera correctement que si l'élément est un enfant direct de l'étiquette BODY. Le plugin que j'ai posté utilise son conteneur parent pour calculer la position centrée. –

Avec CSS pur, c'est ne possible que si le div a une fixeheight. Vous pouvez ensuite position il absolute et définir sa top et left-50% et la margin-top et margin-left à la moitié négative de son width et height respectivement.

Voici un SSCCE, juste copier et coller. La frontière est purement présentationnelle, les styles restants sont requis.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 1909753</title> 
    </head> 
    <style> 
     #content { 
      position: absolute; 
      width: 300px; 
      height: 200px; 
      top: 50%; 
      left: 50%; 
      margin-left: -150px; /* Negative half of width. */ 
      margin-top: -100px; /* Negative half of height. */ 
      border: 1px solid #000; 
     } 
    </style> 
    <body> 
     <div id="content"> 
      content 
     </div> 
    </body> 
</html>

S'il n'y a pas moyen d'une hauteur fixe, alors vous aurez besoin de saisir Javascript et vivre avec le fait que le client va voir le div étant déplacé rapidement milieu pendant le chargement de la page, ce qui pourrait provoquer un " wtf? " expérience.

Source

2009-12-15 19:50:34 BalusC

+1 pour celui-ci – JonH

Je pense qu'il est possible de le faire sans display: table.

ceci est l'exemple:

HTML:

<div class="notificationArea"> 
    something 
</div>

CSS:

.notificationArea 
{ 
    position: absolute; 
    top: 50%; 
    bottom: 50%; 
    right: 50%; 
    left: 50% 
}

Source

2011-03-04 23:32:22 drasto

Que voulez-vous dire? Il y a une règle 'display: table' dans votre CSS et le div n'est pas centré verticalement quand même ... –

La démo montrait un autre exemple pour une raison quelconque. Je l'ai remplacé par le code habituel. – drasto

Faire un conteneur div avec un style display: table et utiliser le style vertical-align: top sur des éléments internes qui sont display: inline-block

Démonstration de travail chez http://jsfiddle.net/uzcrt/

Source

2012-05-30 19:54:23

classe CSS pour aligner un élément au milieu de l'écran:

.middle{ 
    position: absolute; 
    top: 50%; /*50% from top*/ 
    left: 50%; /*50% from left*/ 

    /*remove 50% of element width and height to align the element center in the position*/ 
    transform: translateY(-50%) translateX(-50%); 
}

Maintenant, ajoutez cette classe à l'élément HTML

Source

2017-03-22 11:54:03

Aligner verticalement div (pas de tables)

Répondre

Questions connexes