Alinear texto e imágenes - Curso de CSS3 básico - Capítulo 9

En este capítulo te voy a enseñar a alinear el texto y las imágenes con CSS.

Alinear texto de una página html

Página HTML 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ubicación de las propiedades de CSS</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <p>Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. 
	Fabio me exige, sin tapujos, que añada cerveza al whisky. 
	Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! 
	La cigüeña tocaba cada vez mejor el saxofón y el búho pedía 
	kiwi y queso. El jefe buscó el éxtasis en un imprevisto baño 
	de whisky y gozó como un duque. Exhíbanse politiquillos zafios, 
	con orejas kilométricas y uñas de gavilán. El cadáver de Wamba, 
	rey godo de España, fue exhumado y trasladado en una caja de zinc 
	que pesó un kilo. El pingüino Wenceslao hizo kilómetros bajo 
	exhaustiva lluvia y frío, añoraba a su querido cachorro. El 
	veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña 
	tocaba el saxofón detrás del palenque de paja.Quiere la boca 
	exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin 
	tapujos, que añada cerveza al whisky. Jovencillo emponzoñado 
	de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez 
	mejor el saxofón y el búho pedía kiwi y queso. El jefe buscó 
	el éxtasis en un imprevisto baño de whisky y gozó como un duque. 
	Exhíbanse politiquillos zafios, con orejas kilométricas y uñas de 
	gavilán. El cadáver de Wamba, rey godo de España, fue</p>
</body>
</html>

CSS 

p {text-align: center;}

Resultado en el navegador

Texto alineado con css

Si queremos centrar el texto a la izquierda o a la derecha, lo hacemos con "left" y "right" respectivamente.

CSS 

p {text-align: left;}
Texto alineado a la izquierda con css

CSS 

p {text-align: right;}
Texto alineado a la izquierda con css

También tenemos la opción de dejar el texto ajustado al ancho de página con "justify".

p {text-align: justify;}
Texto justificado con css

Alineamiento vertical de imágenes en CSS

Tenemos una imagen dentro de varios párrafos. Vamos a ver como alinear esto para que quede bien. En el vídeo puedes ver bien la diferencia.

Página HTML 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ubicación de las propiedades de CSS</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <p>Esto es un párrafo <img class="img1" src="pic01.jpg"> una imagen dentro.</p>

    <p>Esto es un párrafo <img class="img2" src="pic01.jpg"> una imagen dentro.</p>

    <p>Esto es un párrafo <img class="img3" src="pic01.jpg"> una imagen dentro.</p>
</body>
</html>

CSS 

.img1 {
    vertical-align: top;
}

.img2 {
    vertical-align: middle;
}

.img3 {
    vertical-align: bottom;
}

Resultado en el navegador

css alineamiento vertical

Capítulos

    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.