Le centrage de l'amt avec des flotteurs à l'intérieur d'un div

Je suis en train de centre de ce fond de nav sur un site de test:

http://heroicdreams.com/kktest/

L'ul li utilise float:left; qui est ce que je pense, il est rester coincé à la gauche. Je suis à essayer de comprendre comment obtenir qu'elle soit centrée.

Pour obtenir les liens affichés horizontalement j'avais besoin de faire flotter à gauche, mais maintenant je ne peux pas obtenir la totalité de la valeur liquidative centrée. Est-il un moyen?

OriginalL'auteur | 2009-08-17

  1. 7

    souvent à l'aide de: 

    .divStyle {
    text-align: center;
}
ul.styleName {
    margin: 0 auto; 
    text-align: left;
}

    fera l'affaire.

    L'application d'une "auto" marge à gauche et à droite de l'ul, comme ce sera la cause de celui-ci au centre de lui-même dans le div à chaque fois que la div a centré le texte. C'est comment de nombreux sites du centre de la div qui sert comme le contenu principal de la page.

    j'ai ceux déjà et il n'est toujours pas centré.
    Puisque vous flottait tous les éléments de la liste, l'amt est d'obtenir une hauteur de zéro et d'une largeur de 100%.
    Vous pouvez supprimer le display:inline sur votre ul, puis de la rendre fixe la largeur (width: 500px) pour centrer, mais c'est un peu un hack parce que l'amt n'est pas correctement les paramètres de la largeur de la zone de
    le problème est que la largeur doit être dynamique
    je l'ai ré-évalué et cela fonctionne. Je me suis débarrassé de la flotte

    OriginalL'auteur jkelley

  2. 1

    Voici comment je l'ai résolu, et c'est pour les menus générés dynamiquement.

    Suppose que c'est la générées dynamiquement menu:

    <div id="menu">
   <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
   </ul>
</div>

    et c'est le CSS:

    .menu {
    width:300px;
    text-align: center; /*Set a width and text-align on the main div*/
}

.menu ul{
    margin:0;
    padding:0;
    display:inline-block;
    list-style: none;   /*Set display to inline-block to the ul*/
}

.menu ul li {
    float: left;
    margin-right: 1.3em; /*this is the usual*/
    padding: 0;
}

    Maintenant, pour la liste pour être centré vous avez besoin d'ajouter un paragraphe vide pour effacer le flotteur. Vous pouvez le faire manuellement si le menu est statique ou à l'aide de jQuery comme ceci:

    $(document).ready(function() {
    $("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})

    et le CSS de la .clear paragraphe sera:

    p.clear{
    clear:both;
    margin:0;
    padding:0;
    height: 0;
    width: 0;
}

    et c'est tout!

    OriginalL'auteur Gurita Radu

  3. 1
    1. Ajouter style="text-align: center;" à la div parent de l'ul.
    2. Ajouter style=" display:inline-table;" à l'ul.

    OriginalL'auteur Dashrath

  4. 0

    Soit CSS:

    margin: 0px auto;

    ou

    /*on the nav's parent*/
text-align: center;

/*on the nav*/
text-align: left;
    J'ai tout de ceux déjà défini. ce n'est pas de le fixer.

    OriginalL'auteur

  5. 0

    Pour margin:0 auto de travail, vous devez définir une largeur sur votre ul et retirer le display:inline:

    #footerLinks ul {
  list-style:none;
  margin:0 auto;
  padding:0;
  width:400px;
}
    le problème est que la largeur doit être dynamique.

    OriginalL'auteur Emily

  6. 0

    Hmm, je pense que le BAISER de la règle s'applique ici:

    ul { text-align: center; }
ul li { display: inline-block; }

    OriginalL'auteur Phil LaNasa