CSS - centrar enlace en div y que ocupe 100%

 
Vista:
Imágen de perfil de Fernando
Val: 12
Ha disminuido su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

centrar enlace en div y que ocupe 100%

Publicado por Fernando azarias08@hotmail.com (7 intervenciones) el 09/05/2017 16:35:26
Hola, tengo un div en el cual tiene un enlace y lo que quiero es que el enlace esté centrado horizontal y verticalmente y que ocupe el 100% del div.
Les dejo el código que tengo hasta ahora
https://codepen.io/fernando143/pen/YVYMJB

Sé que podría meter el div dentro del enlace pero eso no es correcto.
Esto es una tontería yo lo sabía hacer pero no me acuerdo.


Saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 685
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

centrar enlace en div y que ocupe 100%

Publicado por xve (484 intervenciones) el 09/05/2017 17:55:21
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 9
Ha disminuido su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

centrar enlace en div y que ocupe 100%

Publicado por isabel (3 intervenciones) el 09/05/2017 19:36:11
Hola!
Puedes hacerlo con display:table / display:table-cell:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.N5{
	background-color: #3b877f;
	width: 500px;
	height: 80px;
	display: table;
  margin: 0 auto;
	justify-content: center;
	align-items: center;
}
.N5 a{
  width: 100%;
  text-align: center;
  display:table-cell;
  vertical-align: middle;
}

O si quieres dejar el .N5 tal y como estaba, así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.N5{
	background-color: #3b877f;
	width: 500px;
	height: 80px;
	display: flex;
  margin: 0 auto;
	justify-content: center;
	align-items: center;
}
.N5 a{
  width: 100%;
  text-align: center;
  background:yellow;
  display: inline-block;
  padding:32px;
}

es lo que se me ocurre!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Fernando
Val: 12
Ha disminuido su posición en 4 puestos en CSS (en relación al último mes)
Gráfica de CSS

centrar enlace en div y que ocupe 100%

Publicado por Fernando (7 intervenciones) el 09/05/2017 23:45:23
Gracias a todos por sus respuestas.
En particular me sirvio lo de text-align: center.

Me había olvidado de eso!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad