CSS: Nie mogę umieścić przycisk na środku elementu DIV

Question

używam przycisków CSS z tego poradnika:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

muszę umieścić przycisk w środku DIV więc jest wyśrodkowany. Ale nie mogę!

Oto kod przycisku:

<a class="button" href="#"><span>Bring world peace</span></a> 

A oto CSS:

.clear { /* generic container (i.e. div) for floating buttons */ 
    overflow: hidden; 
    width: 100%; 
} 

a.button { 
    background: transparent url('bg_button_a.gif') no-repeat scroll top right; 
    color: #444; 
    display: block; 
    float: left; 
    font: normal 12px arial, sans-serif; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; /* sliding doors padding */ 
    text-decoration: none; 
} 

a.button span { 
    background: transparent url('bg_button_span.gif') no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 

Oto kod próbuję użyć:

<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div> 

Answer 1

atrybutu align dla elementu div jest przestarzała. Lepiej zdefiniowania klasy dla tego div, tak:

<div class="centerize"> 
    <a class="button" href="#"><span>Bring world peace</span></a> 
</div> 

a CSS:

.centerize { 
    text-align: center; 
} 

Należy jednak pamiętać, że ustawienie text-align wpłynie tylko zawartość wewnątrz div. Sam div (powinien być) elementem blokowym, i zależnie od tego, gdzie znajduje się w strukturze dokumentu, może nie być wyśrodkowany.

Wystarczy zrobić trochę bardziej pewne, można zrobić coś takiego:

.centerize { 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 

Teraz można zastosować centerize do dowolnego elementu, a element powinien trwać szerokość całej przeglądarki i centrum wyrównać jego zadowolony.

Answer 2

a.button jest płynął w lewo. Możesz wypróbować float: none; na tym elemencie. margin: 0 auto; jest również przydatny do elementów wyrównujących środek.

Czy to pomaga?

Answer 3

Modyfikuj klasę przycisk dla tych właściwości:

.button{ 
    margin-left:50%; 
    margin-right:50%; 
    position: relative; 
} 

i owinąć link w div tak:

<div align="center"> 
    <a class="button" href="#"><span>Bring world peace</span></a> 
</div>