2

introducir la descripción de la imagen aquí

Estoy tratando de centrar este texto en un boton como puedo hacerlo?

<div class="container-sm">
    <div class="wrap-login100-form-btn">
          <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn" name="registe">Unirse</button>
          </div>
    </form>
    </div>
</div>
3
  • Tienes que hacerlo con css , con display:flex y justify-content y align-content con valor centre
    – RoyalUp
    el 15 dic. 2020 a las 21:00
  • Tienes una etiqueta rota. Concretamente la etiqueta form. Las reglas d maquetación que sigue el botón estarán declaradas en algún fichero CSS "linkado" en la página. Ahí es donde se está definiendo la alineación del botón.
    – cooper
    el 15 dic. 2020 a las 21:02
  • Eso debe ser por que falta codigo, asi como falta el CSS que el tiene, boostrap y demases
    – Excorpion
    el 15 dic. 2020 a las 21:03

3 respuestas 3

2

Podrías crear una clase CSS aparte y ponerle la propiedad text-align: center; o utilizar las clases que da Bootstrap por defecto, https://getbootstrap.com/docs/4.0/utilities/text/.

Código CSS:

.clasecss{ text-align: center; }

Con Bootstrap:

<p class="text-center">Center aligned text on all viewport sizes.</p>
3
  • Muchas gracias por tu ayuda me soluciono el problema. el 15 dic. 2020 a las 21:09
  • A nada, siempre es importante leer la documentación del framework ya que estos de css suelen tener muchas herramientas practicas que nos ahorran esas 4 líneas de estilos css...
    – KuroDev
    el 15 dic. 2020 a las 21:20
  • Muchas gracias @David saludos!!!!
    – Jorgesys
    el 18 dic. 2020 a las 22:24
0

Ocupa class="text-center" dentro de tu button

0

Puedes crear un fichero externo CSS y desde este aplicarlo sobre el botón aplicando text-align: center; y tu texto debería estar perfectamente centrado.

.login100-form-btn{
height: 100px;
width: 200px;
text-align: center ;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ruta/archivo.css">
</head>
<body>
<div class="container-sm">
    <div class="wrap-login100-form-btn">
          <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn" name="registe">Unirse</button>
          </div>
    </form>
    </div>
</div>
</body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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