CSS - centrar enlace en div y que ocupe 100%

   
Vista:
Imágen de perfil de Fernando

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

centrar enlace en div y que ocupe 100%

Publicado por xve (462 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

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

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