3

Buenas, no consigo centrar un enlace.

#Anyadir-Rutina-btn {
  background-color: #21211d;
  color: #FFF;
  padding: 10px;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
}
<div id="Power-Contenedor">

  <a href="#" id="Anyadir-Rutina-btn"> Añadir entreno </a>

</div>

¿Cual es el motivo por el que no me deja?

Salud

1
  • 1
    El principal motivo es que no tiene ninguna propiedad que intente centrar el elemento por lo tanto no se podría responder el (por qué no lo deja) . Para centrar quizá bastaría con agregar un position: relative;left: 50%;
    – Dev. Joel
    Commented el 27 dic. 2017 a las 23:06

2 respuestas 2

4

Simplemente deberías de asignarle la propiedad text-align: center a tu contenedor para que centre el enlace, ya que este es un elemento inline.

ACLARACIÓN: Al coger los elementos de bloque (display: block) el 100% de la anchura disponible por defecto, en este caso no te hará falta definirle una anchura ya que cogerá el 100% de la anchura de la página.

Tu ejemplo modificado:

#Power-Contenedor{
  text-align: center;
}

#Anyadir-Rutina-btn {
  background-color: #21211d;
  color: #FFF;
  padding: 10px;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
}
<div id="Power-Contenedor">
  <a href="#" id="Anyadir-Rutina-btn"> Añadir entreno </a>
</div>

4

Debe definir un ancho al contenedor #Power-Contenedor, y luego si lo centras.

#Power-Contenedor{
  width: 100%;
  text-align: center;
}

#Anyadir-Rutina-btn {
  background-color: #21211d;
  color: #FFF;
  padding: 10px;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
}
<div id="Power-Contenedor">

  <a href="#" id="Anyadir-Rutina-btn"> Añadir entreno </a>

</div>

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.