Buenas, tengo un problema de posicionar un texto dentro de un div con CSS. Me gustaria que saliese centrado tanto verticalmente como horizontalmente.
Para centrarlo horizontalmente he usado "text-aligh: center" y para centrarlo verticalmente he probado varias cosas pero sin exito: display:table-cell;vertical-align:middle; etc etc (varias cosas que he encontrado por ahí).
El problema es que el texto se centra horizontalmente pero la parte inferior de las letras se sale un poco del div cuando por arriba de las letras sobra muuucho espacio.
Alguien me puede proponer una solución para ésto? En principio no tiene que ser ningún problema de los "margin" (que a veces pueden tocar las narices). Pongo aquí la porción de código para que lo vean si quizá estoy haciendo algun error:
HTML:
<div class = "login">
<div class = "titol_login">
<h2>ACCÉS DELS MÚSICS</h2>
</div> <!--titol_login-->
</div> <!--login-->
CSS:
.login{
height: 170px;
width: 370px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
float: right;
border: 10px solid #FE2E2E;
background-color: yellow;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
}
.titol_login{
height: 40px;
width: 370px;
position: absolute;
background-color: blue;
border-top-left-radius: 20px;
background-color: blue;
text-align: center;
}
El texto esta corrido por que h2 tiene prefijo un margin, podes verlo aprentado ctrl+alt+i, seleccionas h2 con el mouse y en Box Model ves que posee un margen arriba y abajo.
Asi que podes sacarlo..
h2{
margin: 0px;
}
Existe archivos css para resetearlos y que no te den conflicto de entrada, se llaman css reset y son solo archivos css.
Muchas gracias! desconocia lo del margen por defecto en los h2. Me has solucionado el problema.