Problema con centrar los botones

Ronyjcg · #1 (**permalink**) 10/02/2016, 11:09

Buenos Días!

Les escribo porque estoy haciendo mi primera pagina web.

Pero tengo grandes problemas con el centrado de los botones.

Aquí les dejo mi HTML y CSS

HTML
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 header">
<div class="col-xs-12 col-md-12 img">
<img src="../PNG/LOGO AUDIO SISTEMAS.png"/>
</div>


<div class="col-xs-12 col-md-12 button">
<div class="bs-example" data-example-id="btn-variants">

<a href="index.html">
<button type="button" class="btn btn-default">Home</button></a>

<a href="../../../../Web/Audio Sistemas/WEBSITES/HTML/Quienes Somos.html">
<button type="button" class="btn btn-default">Quienes Somos</button></a>

<a href="../../../../Web/Audio Sistemas/WEBSITES/HTML/Concesionarios.html">
<button type="button" class="btn btn-default">Concesionarios</button></a>

<a href="../../../../Web/Audio Sistemas/WEBSITES/HTML/Galeria.html">
<button type="button" class="btn btn-default">Galeria</button></a>

<a href="../../../../Web/Audio Sistemas/WEBSITES/HTML/Contacto.html">
<button type="button" class="btn btn-default">Contacto</button></a>

<a href="https://www.facebook.com/">
<button type="button" class="btn btn-default">Facebook</button></a>

</div>

</div> 
</div> 

CSS

/**Botones**/
.bs-example {
position:relative;
width:100%; /*ancho*/
height:38px; /*alto*/
margin-top:45px; /* posicion de la botonera respecto arriba */
padding:0;
border-radius: 10px 10px 10px 10px;
float:none;
/*padding-left:20px; posicion de la botonera lado izquierdo
padding-right:20px; posicion de la botonera lado derecho */
list-style:none;
line-height:38px;
}
.bs-example>.btn, .bs-example>.btn-group {
margin-top: 2px;
margin-bottom: 2px;
}

.btn-default {
color:#FFF;
background-color:rgb(202,101,122);
-webkit-transition:color, linear 0.85s;
-webkit-transition:background, linear 0.85s;
}

.bs-example>.btn a:active{
color:rgb(5,75,140);
background-color:#FFF;
}

emiliano9386 · #2 (**permalink**) 11/02/2016, 22:32

Hola, creo que por un lado no sé si me equivoco pero el div=Row no está cerrado lo que te debería provocar problemas.
Si no entendí mal el bs-example es el contenedor de los botones, si queres centrar todos los botones podrías o bien encerrarlos en otro div y ponerle margin: auto, o ponerle eso a cada botón.
Te recomiendo que para este tipo de cosas uses la etiqueta UL. Así vas a lograr tener los botones uno debajo del otro o al lado del otro y siempre centrado dentro del contenedor q sea, poniendo margin auto a la UL, y es más ordenado tb.

Saludos, espero q te sirva!!

Camatagua123 · #3 (**permalink**) 12/02/2016, 16:15

creo que con esto deberia de quedar centrado

Código:

.bs-example>.btn, .bs-example>.btn-group {

      margin: 2px auto;

}

avisa cualquier cosa