-2

No estoy logrando centrar el texto [Unete] en el boton ya he tratado con codigos que vi en internet y aun nada, me podrian guiar con el codigo introducir la descripción de la imagen aquí

Css

input[type=submit] {
  background-color: #4CAF50; 
  color: white;
}



 <div class="flex-m w-full p-b-40">
                        </div>  
                    </div>
                    <div class="container-sm">
                        <div class="wrap-login100-form-btn">
                            <div class="login100-form-bgbtn"></div>
                            <button class="login100-form-btn" name="registe">
                            Únete
                            </button>
                        </div>
                    </div>
</body>
</html>
3
  • Intenta revisar el html, esta mal, en cuanto al centrado podes utilizar text-align:center en el contenedor del texto, en este caso el boton.
    – Franco
    el 16 ene. 2021 a las 3:43
  • Hola @Luz, agrega el código suficiente que permita reproducir el mismo botón que tienes en tu proyecto acá en Stack Overflow, de lo contrario, será muy difícil que puedas conseguir orientación. Consulte cómo crear un ejemplo mínimo, completo y verificable. el 16 ene. 2021 a las 5:10
  • 5
    ¿Responde esto a tu pregunta? Como centrar texto en botón el 25 ene. 2021 a las 17:34

3 respuestas 3

1

Tu css está dando estilos a un input tipo submit, y no un button, en este caso el texto se coloca adentro, de todas formas si usas button solamente centra el texto, pero si quieres mas ayuda postea el css del botón:

button {
  background-color: #4CAF50; 
  width: 500px;
  color: white;
  text-align: center;
  padding: 5px 25px;
}
<button class="login100-form-btn" name="registe">Únete</button>

1
  • 1
    La propiedad text-align: center no es necesaria dentro de un button. Pues por defecto tiene centrado vertical y horizontal al contenido interior
    – DavElsanto
    el 16 ene. 2021 a las 19:46
0

Algo sencillo, puedes usarlo así:

<button class="login100-form-btn" name="registe" style="width:200px;text-align:center;">Únete</button>

Es solo una alternativa pero lo recomendable es darle una clase y usarlo con CSS Algo así:

.txtCenter {
  width: 200px;
  text-align: center;
  padding: 10px;
}
<button class="login100-form-btn txtCenter" name="registe">Únete</button>

0

Añade a tu botón el type, por eso no te funciona

 <button type="submit" class="login100-form-btn" name="registe">
                        Únete
                        </button>

Y cambia el CSS:

  button[type=submit] {
tu codigo anterior;
text-align: center;
}
0

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