Comment placer un bouton dans le centre de la div de taille dynamique

J'ai ce code:

<div class="outer">
    <ul class="list">
        <li class="inner">
            <div class="line">information1</div>
            <div class="line">hyperlink1</div>
        </li>
        <li>
            <div class="line">information2</div>
            <div class="line">hyperlink2</div>
        </li>
        <li>
            <div class="line">information3</div>
            <div class="line">hyperlink3</div>
        </li>
        <li>
            <div class="line">information4</div>
            <div class="line">hyperlink4</div>
        </li>
    </ul>
    <input type="submit" id="send" value="send" class="button"/>
</div>

et le css:

.outer
{
    display: table;
    border: 1px solid;
    padding: 5px;
}    
.list
{
    list-style: none;
    padding: 5px;
}    
.inner
{
    display: table-row;
    padding: 5px;
}    
.line
{
    display: table-cell;
    border: 1px solid;
    border-radius: 5px;
}    
.button
{
    top:50%; 
    left:50%;
}

la sortie est: cette

Maintenant, je veux placer le bouton dans le centre de la 'extérieur' div peu importe quelle est la largeur.

exemple: je veux que le bouton pour être dans le centre, même pour: cette. sans avoir à modifier le css à chaque fois que le div changements de taille. Même si l '"extérieur" div est dynamique, le bouton doit être dans le centre.

merci.

OriginalL'auteur s.mujahid8 | 2013-03-19

  1. 16

    Cela permet d'obtenir ce que vous cherchez en un simple, de la concision, de la manière:

    .button {
    display:block;
    margin: 0 auto;
}

    http://fiddle.jshell.net/mDHBX/2/

    parfait. merci beaucoup.
    Il ne fonctionne pas pour moi, mon bouton largeur est de 100%.

    OriginalL'auteur Kyuuji

  2. 4

    Vous avez besoin pour donner le bouton de la largeur et ensuite vous pouvez utiliser automatique des marges

    .button {
  display: block;
  margin: 0 auto;
}

    http://fiddle.jshell.net/CrHyd/

    cela va se briser si le texte à l'intérieur du bouton est trop long pour être parfaitement à l'intérieur de 100px
    ya. si le mot est très longue. il n'est pas en montrant la fin de la partie.
    Vous n'avez pas besoin de la largeur, c'est vrai. 100px étaient juste un exemple basé sur le code qu'il a donné. Quand était la dernière fois "Envoyer" besoin de plus de 100px?
    ya. je n'ai pas assez de réputation pour voter. mais merci quand même.
    vous allez y arriver!

    OriginalL'auteur Raffael

  3. 1

    Il n'y a plus d'une façon de le faire. Je préfère utiliser des pourcentages comme suit:

    input[type="submit"]{
    min-width:20%;
    max-width:20%;
    margin:0% 39% 0% 40%; //margin-right = 39% to stop errors
}

    Autres personnes préfèrent un margin:auto approche, mais personnellement je n'ai jamais trouvé que cela fonctionne. D'autres méthodes incluent l'utilisation de floats mais je ne suis pas d'accord avec cette propriété comme il mis aligne d'autres éléments dans certains navigateurs.

    À l'aide de haut et de gauche, va provoquer des erreurs que vous n'avez pas spécifié un type de poste autre que celui par défaut (statique).

    ya. cela fonctionne bien. merci.

    OriginalL'auteur sourRaspberri

  4. 0

    Cela devrait fonctionner

    .outer {
display: inline-block;
text-align: center;
}

    violon

    je voulais que ce soit sous forme de tableau et je voulais le bouton au centre de la div. au-dessus de la css, il met au centre de la page.
    enrouler ensuite le bouton soumettre dans certains autres div et appliquer ce style à elle avec width:100%; violon: fiddle.jshell.net/mDHBX/9

    OriginalL'auteur Pankaj Phartiyal

  5. 0

    Il suffit de changer .button de cela, en utilisant le margin de la propriété. (1 ligne fixe)

    .button
{
    margin:0 auto;
}

    Ici un Violon où j'ai fait l' .outer une largeur fixe de 500px juste pour montrer un exemple de ce que margin n':

    DÉMO

    merci. son simple.

    OriginalL'auteur chriz