Pozycjonowanie tekstu i obrazków z pomocą CSS

Czas czytania: < 1 minut

W jednym z poprzednich wpisów pokazałam w jaki sposób wyśrodkować obrazek lub tekst wykorzystując do tego czysty HTML. Tym razem pójdę o krok dalej i do ustawiania ich na stronie użyję kaskadowych styli czyli CSS.

Właściwości Float

Jeną z metod ustawiania obrazków na stronie jest float, może on przyjmować kilka różnych wartości.

float:right;

<img style="float:right;" src="https://www.aurainweb.pl/wp-content/uploads/2013/02/wordpress-api-e1372490516916.jpg" alt="" width="130" height="130" />

Przykład:

float:left;

<img style="float:left;" src="https://www.aurainweb.pl/wp-content/uploads/2013/02/wordpress-api-e1372490516916.jpg" alt="" width="130" height="130" />

Przykład:

Metoda ta może być również używana do ustawiania innych elementów na stronie takich jak „div”.

Właściwości Text-align

Odnosi się głównie do formatowania tekstu.

text-align:right:

<p style="text-align: right;">Przykładowy formatowany tekst.</p>

Przykład:

Przykładowy formatowany tekst.

text-align:left;

<p style="text-align: left;">Przykładowy formatowany tekst.</p>

Przykład:

Przykładowy formatowany tekst.

text-align:center;

<p style="text-align: center;">Przykładowy formatowany tekst.</p>

Przykład:

Przykładowy formatowany tekst.

Jak widać z pomocą CSS układanie tekstu na stronie jest bardzo proste.
 

Warto przeczytać:

• wyśrodkowanie obrazka lub tekstu HTML
• dopasowywanie tekstu kształtu