Bicicletes_electriques
Disseny6
Disseny6
Llancaport
Fotocarreras
Carrigan
Girodansa

Alineamiento vertical con CSS

Leyendo el otro día encontré un truquillo que me sorprendió por su sencillez y su eficiencia, recuerdo que en más de una ocasión he tenido algun que otro problema con el alineamiento vertical de texto dentro de un div usando CSS. Pues bién, aquí os dejo una solución:

Simplemente se trata de definir el interlineado del elemento que contenga el texto con un valor igual a su altura. O sea, si tenemos un div que tiene una altura de 15px deberemos asignarle con CSS un interlineado de 15px. Tan sencillo cómo esto:

#contenedor { height:15px; line-height:15px; }


David - about 1 year ago | CSS | 3 comentarios

Comentarios

Daniel Alonso:

Buenas; yo también tengo bastantes problemas con el alinead vertical ybuscando en google di con tu página y con tu solución, y es fantástica, pero sólo si el texto que va contenido en el div ocupa una sola línea, ya que si el div contenedor tiene una altura fija, en el momento en el que el texto se divide en dos líneas, no cabe dentro :-(. En cualquier caso, como truco para alinear listas de cadenas de texto no muy largas es estupendo. Un saludo y enhorabuena por la web!

David:

Buenas Daniel, Cómo dices la solución sólo sirve para textos de una línea, pero es un truco bastante útil. Para textos más largos podrías crear una tabla con html y usar la propiedad "valign" para centrar el texto verticalmente dentro de una celda. Me alegro de que te guste mi nueva web! ;)

www.in-genio.es:

Esto tiene un problema, solo es apto para una sola linea.... Os recomiendo que lo hagais mediante divs anindados Es decir #contenedor{ ancho:400px; alto:400px; } #texto{ posicion:relativa; } <div id="contenedor"> <div id="texto"> TEXTO AKI </div> </div> Luego mediante javascript calculamos el alto de texto. y a #texto le asignamos estos valores (tb mediante javascript): top:50%;margin_top:<alto capturado por javascript>/2 Un saludo.

Deja tu comentario




AVISO

Todos los campos de éste formulario son obligatorios

Este formulario no admite enlaces ni etiquetas HTML, no te molestes en intentarlo. ;-)