kursy, tutoriale

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.
 

https://www.aurainweb.pl/2017/01/wysrodkowanie-obrazka-lub-tekstu-html/

https://www.aurainweb.pl/2016/08/dopasowywanie-tekstu-ksztaltu-okregu/