botón CSS Centro

tema CSS centrado habitual, simplemente no funciona para mí, el problema es que no sé el acabado px de anchobotón CSS Centro

tengo un div para todo el NAV y luego cada botón en el interior, que te centro más cuando hay más de un botón. :(

CSS

.nav{ 
    margin-top:167px; 
    width:1024px; 
    height:34px; 
} 

.nav_button{ 
    height:34px; 
    margin:0 auto; 
    margin-right:10px; 
    float:left; 
}

HTML

<div class="nav"> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 

     </div> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 

     </div> 
</div>

Cualquier ayuda sería muy apreciada. Gracias

Resultado

Si la anchura es desconocida, he encontrado una manera un centro de los botones, no del todo feliz, pero la materia no funciona, funciona: D

La mejor manera es poner en una tabla

<table class="nav" align="center"> 
    <tr> 
     <td> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 
     </div> 

     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 
     </div> 
     </td> 
    </tr> 
    </table>

Fuente

2010-09-01 Stevanicus

113

Comprendo que esto es una pregunta muy antigua, pero me topé a través de este problema hoy y lo tengo para trabajar con

<div style="text-align:center;"> 
    <button>button1</button> 
    <button>button2</button> 
</div>

Cheers, Marcos

Fuente

2012-10-15 03:15:55 markbaldy

Funcionó como un amuleto. Kudos @markbaldy – andy4thehuynh

El problema es con la siguiente línea de CSS en .nav_button:

margin: 0 auto;

eso sólo funcionaría si tuviera un botón, es por eso que están fuera del centro cuando hay más de un nav_button divs.

Si desea que todos sus botones nido del nav_buttons centradas en otro div:

<div class="nav"> 
    <div class="centerButtons"> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 
     </div> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 
     </div> 
    </div> 
</div>

Y el estilo de esta manera:

.nav{ 
    margin-top:167px; 
    width:1024px; 
    height:34px; 
} 

/* Centers the div that nests the nav_buttons */ 
.centerButtons { 
    margin: 0 auto; 
    float: left; 
} 

.nav_button{ 
    height:34px; 
    margin-right:10px; 
    float: left; 
}

Fuente

2010-09-01 23:21:58 Espresso

gracias por su publicación, desafortunadamente tampoco funciona, todavía todo a la izquierda. – Stevanicus

Sí, me acabo de dar cuenta de eso. Es porque .centerButtons es un elemento de bloque y ocupa todo el espacio en .nav, lo que hace que las propiedades de margen sean inútiles. Traté de arreglarlo flotando .centerButtons también, pero no tuve suerte. – Espresso

sí, sé que es complicado, me molesta porque lo he hecho antes, pero no puedo recordar cómo:) ... alguna idea? – Stevanicus

cuando todo lo demás falla acabo

<center> content </center>

Sé que no es "a la altura" más, pero si funciona, funciona

Fuente

2013-05-21 15:22:02 ott

Esta respuesta no agrega nada a las otras respuestas. '

' se desaprobó en HTML4 y ni siquiera es compatible con HTML5, lo que significa que probablemente no funcionará si se usa HTML5. – Magnilex

Solo lo uso si no puedo conseguir nada más para trabajar. Lo he usado en páginas donde hay html5 pero prefiero no hacerlo. He pasado y reemplazado lo que pude con '

button

' – ott

Otra buena opción es utilizar:

width: 40%; 
margin-left: 30%; 
margin-right: 30%

Fuente

2016-08-24 08:05:09 Rani

Respuesta

Cuestiones relacionadas