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:
CSS:
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:
Código (html4strict) [Seleccionar]
<div class = "login">
<div class = "titol_login">
<h2>ACCÉS DELS MÚSICS</h2>
</div> <!--titol_login-->
</div> <!--login-->
CSS:
Código (css) [Seleccionar]
.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;
}