Atom

Increíble editor web, uno de mis favoritos.
Gratis, multiplataforma, de código abierto, ligero y personalizable. No se le puede pedir más.
En este capítulo te voy a enseñar a alinear el texto y las imágenes con CSS.
<!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>
p {text-align: center;}
Si queremos centrar el texto a la izquierda o a la derecha, lo hacemos con "left" y "right" respectivamente.
p {text-align: left;}
p {text-align: right;}
También tenemos la opción de dejar el texto ajustado al ancho de página con "justify".
p {text-align: justify;}
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.
<!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>
.img1 {
vertical-align: top;
}
.img2 {
vertical-align: middle;
}
.img3 {
vertical-align: bottom;
}
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.