Pozycjonowanie tekstu i obrazków z pomocą CSS
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.
Co znajdziesz w tym wpisie
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.