1

Tengo un div que tiene un 33.33% de ancho y adentro hay un botón con texto. El problema está en que no puedo centrar el botón dentro del div, teniendo en cuenta que también tiene texto y que sea responsivo.

Éste es el código:

div {
  width: 33.33%;
}

button {

}
<div class="w-33">
  <button>
    upgrade ahora
  </button>
</div>

1
  • Hola José Eduardo, te damos la bienvenida a Stack Overflow en español. Ésta es una pregunta bastante básica (lo cual no es malo) que ya se ha realizado antes en el sitio. Podrías indicar ¿qué has intentado? ¿o qué has investigado? Te recomiendo que leas Cómo preguntar y que completes el recorrido de bienvenida
    – Alvaro Montoro
    Commented el 4 abr. 2018 a las 3:26

4 respuestas 4

5

Lo mejor es crear un div dentro del div.w-33 y centrarlo.

div.w-33 {
  width: 33.33%;
  background-color: orange;
}

div.center {
  text-align: center;
}

button {}
<div class="w-33">
  <div class="center">
    <button>
      upgrade ahora
    </button>
  </div>
</div>

2

Se puede solucionar de varias formas, te dejo a continuación 2 de las que considero más utiles.

1ª Forma:

Se aplica un margen por la izquierda del 50% (Medida que se aplica sobre el contenedor), después se translada el botón hacia la izquierda el 50% de si mismo (como si quitasemos la mitad de su logitud), es decir:

Margen de 50% por la izquierda del botón. Margen de 50% por la izquierda del botón. Translación hacia la izquierda del botón el 50% de si mismo. Translación hacia la izquierda del botón el 50% de si mismo.

2ª Forma:

Con flexbox, se calcula el centro del contenedor y del elemento, y se translada el elemento de tal forma que ambos centros coincidan (todo ello de forma transparente al desarrollador), simplemente utilizando las propiedades adecuadas.

Código:

Aquí dejo el código de ambos métodos.

div.contenedor {
  width: 33.33%;
  background-color: tomato
}

button.centrado {
  width: 110px; /* Para que no se rompa en dos líneas, y lo translade tal cual. */
  margin-left: 50%;
  transform: translateX(-50%);
}

/* OTRA FORMA (flex):
div.contenedor {
  width: 33.33%;
  background-color: tomato;
  display: flex;
  justify-content: center
}
*/
<div class="contenedor">
  <button class="centrado">Boton centrado</button>
</div>

0
.button{ transform: translateX(330%); }
  • El 330% es un valor relativo que me funcionó
  • Pero en algunos casos es 50% ó -50%

Depende de tu código.

-1

Hola puedes intentar con esto

div{
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
  }
3
  • El div tiene una medida de 33%. El boton tiene texto y le he puesto un tamaño de 1.7rem. Quiero que el botón este centrado, al igual que el texto, pero cuando intento que sea responsivo, el texto sale del botón. Commented el 4 abr. 2018 a las 3:34
  • tendrias que usar una media query @media (max-width: 600px) { button{ font-size: 1rem; } } Commented el 4 abr. 2018 a las 3:44
  • 2
    Las respuestas que son solo codigo, no siempre sirven. Siempre se pide que expliques un poco que hace esto. mira por favor Cómo responder
    – gbianchi
    Commented el 4 abr. 2018 a las 3:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.