Center a link

Question

Center a link

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

Good, I can not center a link.

#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>

What is the reason why he will not leave me?

Health

css

asked by NEA 27.12.2017 в 23:09

source

2 answers

3

You must define a width of the #Power-Contenedor container, and then if you center it.

#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>

answered by 27.12.2017 в 23:14

Control of Activities How to know which div was clicked without static id?

score 3 · Accepted Answer

You should simply assign the text-align: center property to your container to center the link, since this is a inline element.

CLARIFICATION: When taking the block elements ( display: block ) 100% of the width available by default, in this case you will not need to define a width as it will take the 100% of the width of the page.

Your modified example:

#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>