Jak umieścić przycisk na środku div dynamicznych wielkości

Question

mam ten kod:

<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> 

i 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%; 
} 

wyjście jest: this

Teraz ja chcesz umieścić przycisk w środku "zewnętrznego" elementu div bez względu na szerokość.

przykład: chcę, aby przycisk był w centrum, nawet dla: this. bez konieczności zmiany css za każdym razem, gdy zmienia się rozmiar div. Nawet jeśli "zewnętrzny" div jest dynamiczny, przycisk powinien znajdować się pośrodku.

dziękuję.

Answer 1

ten osiąga to, czego szukasz w prosty, zwięzły sposób:

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

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

Answer 2

Jest więcej niż jeden sposób, aby to zrobić. Wolę za pomocą procentów tak:

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

Inni ludzie wolą podejście margin:auto ale osobiście nigdy nie znaleźć to zadziałało. Inne metody obejmują używanie floats, ale nie zgadzam się z tą właściwością, ponieważ źle wyrównuje ona inne elementy w niektórych przeglądarkach.

Użycie górnej i lewej strony spowoduje błędy, ponieważ nie określono typu pozycji innego niż domyślny (statyczny).

Answer 3

Trzeba dać przycisk specyficzną szerokość, a następnie można wykorzystać automatyczne marginesy

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

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

Answer 4

To powinno działać

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

fiddle

Answer 5

Wystarczy zmienić .button do tego , używając właściwości margin. (1 linia fix)

.button 
{ 
    margin:0 auto; 
} 

Oto Fiddle gdzie zrobiłem .outer stałą szerokość od 500px żeby pokazać przykład co margin robi:

DEMO