Comment verticalement au moyen d'aligner les éléments flottants de l'inconnu heights?

J'ai un (horizontalement) centré div extérieure contenant les deux éléments de l'inconnu largeur:

<div style='width:800px; margin:0 auto'>
  <div style='float:left'>...</div>
  <div style='float:right'>...</div>
</div>

Les deux flotteurs sont alignée en haut par défaut, et sont de diverses/inconnu et de hauteurs différentes. Est-il possible de les rendre centrée verticalement?

J'ai finalement fait le div extérieure

display: table

et l'intérieur divs 

display: table-cell;
vertical-align: middle;
text-align: left/right;

mais je suis juste curieux de savoir si il existe un moyen de le faire avec les flotteurs.

  • vertical aligner en html/css est au-delà de laid, et la principale source de mes douleurs envie de gifler l'ensemble du W3C autour avec un cadavre en décomposition d'IE6, puis de les nourrir de ce cadavre.
  • Vous n'êtes pas la seule, mais c'est ce que nous avons à travailler avec....
InformationsquelleAutor Yang | 2012-09-24
  1. 57

    Vous ne pouvez pas le faire directement, car flotteurs sont alignés vers le haut:

    Si il y a une zone de ligne, le haut extérieur de la flottait boîte est aligné
    avec le haut de la boîte de ligne.

    L'exacte les règles dire (l'emphase est mienne):

    1. Une boîte flottante du haut extérieur ne peut pas être plus élevé que le haut de son bloc contenant.
    2. La haut extérieur d'une boîte flottante ne peut pas être plus élevé que le haut extérieur de toute bloc ou flotté boîte générée par un
      élément plus tôt dans le document source.
    3. La haut extérieur d'un élément de la boîte flottante ne peut pas être supérieur au-dessus de tout ligne-box contenant une boîte générée par un
      élément plus tôt dans le document source.
    1. Une boîte flottante doit être placée aussi haut que possible.

    Cela dit, vous pouvez profiter de la règle n ° 4:

    • Lieu chaque flotteur à l'intérieur inline-niveau éléments qui établissent un nouveau bloc de mise en forme de contexte /BFC), par exemple display: inline-block.
    • Ces wrappers contiendra les flotteurs parce qu'elles établissent une BFC, et sera l'un à côté de l'autre parce qu'ils sont en ligne-niveau.
    • Utilisation vertical-align pour aligner ces wrapper verticalement.

    Être conscient que l'espace pourrait apparaître entre les inline-block wrappers. Voir Comment faire pour supprimer l'espace entre les inline-block éléments? pour le fixer.

    CSS:

    .float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

/* Float wrappers */
#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

    HTML:

    <div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div>

    • cette solution de travail parce que vous mettez width:49%; même sans flotteur div cela va fonctionner.
    • Je cherchais une solution comme ça pendant un long moment. Merci!
    • Je me rends compte cela a sans doute des applications, mais il semble un peu de la triche pour moi. la seule chose float: right fait ici est de justifier à droite de la BHE au contenu. c'est le display: inline-block et vertical-align: middle qui ne fait le centrage. ce n'est pas vraiment à la verticale de centrage flottait contenu à tous.
    • Le flotteur ne devrait même pas être utilisé ici. Il ne sert à rien d'autre but que de justifier le contenu de droite comme @Simon_Weaver mentionné. Au lieu de cela, il serait préférable d'utiliser text-align: right de cette façon, le div hauteur sera une partie du flux de la page w/out à l'aide d'un clearfix.
    • Probablement vrai. Mais alors il ne sera pas tout à flotteur, donc il ne serait pas répondre à la question. Maintenant, je pense que je réponds, même si je triche un peu.
    • il n'y a rien à tricher parfois (ou plus parfois avec du CSS) 😉 mais il est important que les gens ne pas copier aveuglément les extraits de code comme ça, sans vraiment les comprendre - ou ils vont à la fin avec l'inattendu et déroutant effets secondaires plus tard
    • Il ne fonctionne pas bien pour une autre raison, le contenu est centrée verticalement à lui-même. Si vous modifiez la hauteur du conteneur manuellement, vous verrez les deux parties sont vraiment sur le haut du conteneur.
    • Si le parent a un explicite de la hauteur, vous pouvez insérer une ligne au niveau de la pseudo-élément avec height: 100% et vertical-align: middle (centrage dans l'inconnu technique).

    InformationsquelleAutor Oriol
  2. 9

    Une autre approche serait d'utiliser flex -- il pourrait être un remplacement pour un float si vous avez deux parties. Un (flottant) serait de l'auto de taille, et la seconde à occuper toute la caisse. Sur l'axe transversal vous choisissez center et le tour est joué, vous avez la effet de la flotte et centrée éléments.

    Ici est magnifique triche sur flex: http://jonibologna.com/flexbox-cheatsheet/

    • Bien sûr, vous aller à l'encontre de l'horreur c'est-à-dire lorsque vous essayez de utiliser flex. 😐
    • Cette triche est très utile.
    InformationsquelleAutor greenoldman
  3. 3

    Nan c'est lorsque les cellules du tableau semblent soudain comme une grande idée. Si c'est une hauteur fixe, vous pouvez utiliser la hauteur de la ligne.

    • Et si quelqu'un est allergique à l'aide de tableaux de mise en page, css tables peuvent aussi être utilisés (même si sous le capot, ce sont encore les tables).
    • Le tableau n'est pas si bon, si vous voulez mise en page responsive qui s'écoule naturellement à montrer le dessous à gauche de l'élément sur d'étroites fenêtres.
    • c'est complètement faux si vous utilisez des règles css. Il suffit de changer l'affichage de la table à un bloc d'affichage lorsque cela est nécessaire, au sein de la droite css requête.
    • l'ensemble de la table... bien sûr. Pour chaque td éléments dans la même ligne, c'est bizarre.
    • bien sûr. Cependant, l'idée d'un tableau, c'est que toutes vos données sont présentées de la même manière. Je ne peux pas penser à une situation où vous auriez besoin d'éléments pour se comporter différemment des autres en tenant compte, lorsqu'ils sont alignés de la même non-sensibles forme. J'ai construit plus de 250 sites sensibles et n'est jamais venu à travers n'importe quoi où cela a été un problème. J'aimerais voir un exemple si vous en avez un, cependant. Assez curieux!
    InformationsquelleAutor Trent Stewart