À la verticale du centre de l'ul dans div

C'est ce que mon code ressemble.

HTML

<div id="container">
   <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
   </ul>
</div>

CSS

#container {
  width: 584px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

#container ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 3504px;
}

#container ul li {
  width: 584px;
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Comme le titre le dit, je veux le centre de l'ul verticalement à l'intérieur de la div. Je ne peux pas modifier le CSS en dessus des règles. J'ai cherché sur google des solutions et essayer de trouver un moyen, mais tout semble à entrer en collision avec les règles que j'ai déjà.

Une idée de comment faire cela?

Serait-il utile si, au lieu de la #container div, j'ai utilisé un tableau avec une ligne et une colonne?

Avec le positionnement absolu, vous ne pouvez le faire que si vous savez la hauteur d'élément à l'avance (ou de la mesurer avec JavaScript).
Je peux le faire. Pourriez-vous me donner plus de détails, s'il vous plaît?
essayez d'ajouter : auto; à votre margin:0;
Cela ne fonctionne pas.
double possible de à l'Aide margin:auto pour aligner verticalement div>

OriginalL'auteur Banana | 2013-04-18

  1. 9

    Veuillez utiliser la fonction de recherche dans l'avenir. La réponse complète est expliquée ici; c'est le code de votre scénario:

    .container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;}
.helper {
  #position: absolute; /*a variation of an "lte ie7" hack*/
  #top: 50%;
  display: table-cell;
  vertical-align: middle;}
ul{
  #position: relative;
  #top: -50%;
  margin:0 auto;
  width:200px;}

    Les trois éléments doivent être imbriqués comme suit:

    <div class="container">
  <div class="helper">
    <ul><!--stuff--></ul>
  </div>
</div>

    http://jsfiddle.net/ovfiddle/yVAW9/

    Ne pensez-vous pas que j'ai déjà cherché une réponse? Votre chemin ne fonctionne pas.
    je sais que c'est une vieille question, mais quel navigateur tu utilises?
    Après beaucoup de recherches, j'ai déterminé que cette méthode fonctionne sur l'Opéra, IE8+, Firefox, Chrome et safari.

    OriginalL'auteur o.v.

  2. 3

    De"centrage" un div ou autres récipients verticalement est assez délicat dans le CSS, voici vos options.

    Vous le savez, la hauteur de votre conteneur

    Si vous connaissez la hauteur du conteneur, vous pouvez effectuer les opérations suivantes:

    #container {
    position: absolute;
    top: 50%;
    margin-top: -half_of_container_height_here;
}

    Nous avons donc essentiellement lieu dans le milieu, puis la compenser à l'aide d'un négatif marge égale à la moitié de la hauteur. Vous conteneur parent doit avoir position: relative.

    Vous ne connaissez pas la taille exacte de votre conteneur

    Dans ce cas, vous devez utiliser JavaScript et calculer les marges appropriées (malheureusement, vous ne pouvez pas utiliser margin-top: auto ou quelque chose de similaire).

    Plus d'info ici.

    J'ai essayé de mon mieux pour couvrir la raison pour laquelle margin-top ne peut pas être auto ici - ainsi comme la plus élégante des façons de centrage du contenu à la verticale qu'à l'aide de positionnement absolu 🙂

    OriginalL'auteur MMM

  3. 0

    Si vous pouvez ajouter de la bibliothèque jQuery, vous pouvez essayer ce,

    $(document).ready(function(){

    //Remove li float
    $("#container ul li").css("float", "none");

    //Get the full height of the UL
    var ulheight = $("#container ul li")[0].scrollHeight;

    //Based on the height of the container being 50px you can position the UL accordingly
    var pushdown = (50-ulheight)/2;
    $("#container ul li").css("top", pushdown);

});
    Pourquoi retirer le flotteur?
    Pour l'amour de dépannage. Je vais l'essayer et obtenir de l'os à nu de la solution de travail avant d'y ajouter autre chose qui pourrait influer sur le positionnement. Depuis qu'il a été dit que les CSS ne peut pas être modifié ensuite, vous pouvez le supprimer via jQuery.
    Je voulais dire que j'avais besoin de la CSS pour d'autres raisons, qu'il est pratiquement impossible de l'enlever 😀
    -1, évitez d'utiliser du javascript pour le style de la mesure du possible, en particulier lorsque cela peut être accompli avec le css, c'est une bonne pratique pour éviter les soi-disant "flash de non stylé contenu"
    Ouais, peut-être, mais c'est la seule chose qui est en train de faire ce dont j'ai besoin.

    OriginalL'auteur Rob

  4. -1

    Maintenant vous pouvez faire le conteneur parent display:flex et alignez-les éléments:centre. Cela devrait fonctionner. Bien que flexbox propriétés ne sont pas pris en charge par les navigateurs plus anciens.

    OriginalL'auteur Sebastian Cruz