Como aliñar e flotar elementos nunha páxina web

A colocación de elementos nunha páxina web é esencial para o seu deseño xeral. Aínda que hai outras formas de influír no deseño, como usar táboas ( que non recomendamos ), o mellor é usar CSS .

Abaixo veremos como usar unha propiedade de estilo CSS simple en liña para aliñar imaxes, táboas, parágrafos e moito máis.

Nota: Estes mesmos métodos pódense empregar tamén en follas de estilo externas, pero como se aplican a elementos individuais e, probablemente, necesitan manterse así, é mellor usar estilos en liña como o que se menciona a continuación.

Aliñar os parágrafos do texto

A etiqueta do parágrafo é o primeiro lugar para comezar a súa páxina web. A apertura e o peche das etiquetas é así:

O aliñamento predeterminado do texto nun parágrafo está ao lado esquerdo da páxina, pero tamén pode aliñar os seus parágrafos cara á dereita e ao centro.

Usando a propiedade flotante, podes aliñar os parágrafos á dereita ou á esquerda do elemento primario. Calquera outro elemento dentro do elemento primario fluirá ao redor do elemento flotante.

Para obter o mellor efecto cun parágrafo, é mellor definir un ancho no parágrafo que sexa máis pequeno que o elemento container (parent).

Aliñar o texto dentro dos parágrafos

Probablemente, o aliñamento máis interesante para o texto do parágrafo é "xustificar", o que indica ao navegador que mostre o texto aliñado, esencialmente, tanto para o lado dereito como para o esquerdo da xanela.

Para xustificar o texto dun parágrafo, usarías a propiedade de aliñamento de texto.

Tamén pode aliñar todo o texto dentro dun parágrafo para o lado dereito ou o esquerdo (por defecto), usando a propiedade de alinear texto.

A propiedade do aliñamento de texto aliñará o texto dentro do elemento. Técnicamente, non se supón que aliñar as imaxes que están dentro do parágrafo ou outro elemento, pero a maioría dos navegadores tratan imaxes como liña para esta propiedade.

Aliñar imaxes

Usando a propiedade flotante nunha etiqueta de imaxe pode definir a colocación de imaxes na páxina e como o envolverá o texto.

Do mesmo xeito que os parágrafos anteriores, a propiedade do estilo flotante na etiqueta da imaxe colocará a súa imaxe na páxina e informa ao navegador como se flúe texto e outros elementos ao redor da imaxe.

O texto seguindo a etiqueta de imaxe anterior fluirá ao redor da imaxe cara á dereita mentres a imaxe móstrase á esquerda da pantalla.

Se quero que o texto deixe de envolver a imaxe, uso a propiedade clara:


style = "clear: left">

Aliñar máis que parágrafos

Non obstante, que se quere aliñar máis que un parágrafo ou unha imaxe? Pode simplemente poñer unha propiedade de estilo en cada parágrafo, pero hai unha etiqueta que pode usar que é máis efectiva:

Basta con arredor do texto e as imaxes (incluídas as etiquetas HTML ) coa etiqueta e a propiedade do estilo (flotante ou aliñamento de texto) e todo o que se alinee na división como lle gustaría.

Teña en conta que as aliñacións engadidas a parágrafos ou imaxes dentro da división serán honradas, anulando a etiqueta.