CSS: No puedo poner un botón en el medio de un elemento DIV

Question

estoy usando los botones CSS de este tutorial:

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

tengo que poner un botón en el medio de un DIV así que está centrado. ¡Pero no puedo!

Aquí está el código del botón:

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

Y aquí es 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; 
} 

Aquí está el código que estoy tratando de usar:

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

Answer 1

el atributo align para el elemento div es obsoleto. Es mejor que la definición de una clase para que div, así:

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

Y el CSS: sin embargo

.centerize { 
    text-align: center; 
} 

Tenga en cuenta que el establecimiento de la text-align sólo afectará el contenido dentro de la div. El div mismo (debería ser) un elemento de bloque, y dependiendo de dónde se encuentre en la estructura del documento, puede no estar centrado.

Sólo para hacer un poco más seguro, puede hacer algo como esto:

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

Ahora puede aplicar centerize a ningún elemento, y ese elemento debe ocupar el ancho de todo el navegador y el centro-alinear su contenido.

Answer 2

El a.button se flota a la izquierda. Puedes probar float: none; en ese elemento. margin: 0 auto; también es útil para elementos de alineación central.

¿Eso ayuda?

Answer 3

modificar la clase botón para estas propiedades:

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

y envolver su enlace en el div como esto:

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