Medio:alinear verticalmente el texto de un párrafo elemento de código CSS
p.event_desc
{
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 14px;
height:35px;
margin: 0px;
}
y HTML:
<p class="event_desc">Lorem ipsum.</p>
cómo alinear el texto en el elemento p estar centrada verticalmente?
intento con -
display: table-cell;
vertical-align: middle;
padding: 10px;
Demostración: http://jsfiddle.net/L5r5W/2/
Soy nuevo en HTML CSS. Intenté buscar una respuesta que no incluyera tablas (porque aparentemente son malas ...). Esta respuesta fue demasiado simple para dejarla pasar así que la estoy usando. –
@vivekmaharajh El uso de etiquetas de tabla HTML para el diseño es malo. No creo que sea malo usar la tabla en 'display' para cosas como esta. – Keavon
¿Qué sucede si desea que el párrafo abarque todo el ancho, pero solo contiene un par de palabras? –
Puede usar line-height para eso. Simplemente configúralo a la altura exacta de tu etiqueta p.
p.event_desc {
line-height:35px;
}
Esta es una solución genial, pero no funciona si quiere alinear texto de varias líneas ... – Gatekeeper
@Gatekeeper en tal caso simplemente podemos alinear el párrafo dentro de un contenedor para centrarlo verticalmente. Tal como con este método: [Centrado en lo desconocido] (http://css-tricks.com/centering-in-the-unknown/). –
¿Qué hiciste para aprender algo nuevo el viernes por la tarde ... genial :-D – Gatekeeper
usted podría utilizar
line-height:35px;
Realmente no debería establecer una altura sobre el párrafo ya que no es bueno para la accesibilidad (lo sucede si el usuario aumenta el tamaño del texto, etc.)
lugar de utilizar un div con una altura y el p en su interior con la línea-altura correcta:
<div style="height:35px;"><p style="line-height:35px;">text</p></div>
Prueba esto:
display: table-cell;
vertical-align: middle;
padding: 10px;
¿Trató de jugar con el margen? Yo tenía el mismo problema, es por eso que estoy aquí :)
Aquí es lo que me ayudó:
element {
margin: auto;
}
Si lo necesita para ser alineado a la izquierda o la derecha y centro, se puede hacer:
element {
margin-top: auto;
margin-bottom: auto; /*You can use shorthand*/
}
Esto le Alinea verticalmente dentro del elemento contenedor, y sc ponlo en el lado derecho.
espero que esto sea útil :)
Posible dublicate: http://stackoverflow.com/questions/10939288/how-can-i-vertically-center-text-in-a-dynamically-high-div/10939940 –
La diferencia es que este tiene altura fija y no es padre – Julix