W HTML istnieje kilka atrybutów służących do wyrównywania obrazów. Oto niektóre z nich:

• Atrybut align
• Atrybut style z CSS
• Użycie klas CSS
• Wykorzystanie elementów blokowych

Atrybut align

Atrybut align był używany w starszych wersjach HTML do wyrównywania obrazów w odniesieniu do tekstu. Jednak nie jest już zalecany i został zastąpiony przez style CSS. Przykład użycia:

<img src="obraz.jpg" alt="Zwierzę" align="left">

Atrybut align był kiedyś używany do wyrównywania różnych elementów HTML, w tym obrazów i tekstu, w stosunku do innych elementów na stronie. Obecnie atrybut ten jest przestarzały i nie jest zalecany do stosowania, zamiast tego powinno się korzystać z stylów CSS do osiągania odpowiednich wyrównań.

Wartości atrybutu align mogą być różne w zależności od kontekstu, w jakim jest używany. Poniżej przedstawiam przykładowe wartości atrybutu align oraz ich znaczenie:

left (lewo) – Wyrównuje element do lewej strony, przykład:

<img src="obraz.jpg" alt="Krajobraz" align="left">

right (prawo) – Wyrównuje element do prawej strony, przykład:

<img src="obraz.jpg" alt="Miasto" align="right">

center (środek) – Wyrównuje element do środka, przykład:

<p align="center">Ten tekst jest wyśrodkowany.</p>

top (góra) – Wyrównuje element do góry, przykład:

<img src="obraz.jpg" alt="Zwierzę" align="top">

bottom (dół) – Wyrównuje element do dołu, przykład:

<img src="obraz.jpg" alt="Ptak" align="bottom">

middle (środek) – Wyrównuje element do środka w pionie, przykład:

<img src="obraz.jpg" alt="Kwiat" align="middle">

baseline (linia bazowa) – Wyrównuje element względem linii bazowej tekstu, przykład:

<img src="obraz.jpg" alt="Obiekt" align="baseline">

absmiddle (absolutny środek) – Przestarzała wartość, używana do wyrównywania elementu w połowie jego wysokości.

absbottom (absolutny dół) – Przestarzała wartość, używana do wyrównywania elementu do jego dolnej krawędzi.

Jednakże, zaleca się unikanie atrybutu align i korzystanie z CSS do wyrównywania elementów na stronie, ponieważ CSS oferuje większą kontrolę nad wyglądem i układem.

Atrybut style z CSS

Najlepszym podejściem do wyrównywania obrazów jest wykorzystanie styli CSS. Możesz to zrobić za pomocą atrybutu style w znaczniku <img>, lub poprzez zewnętrzne arkusze stylów CSS. Przykład:

htmlCopy code<img src="obraz.jpg" alt="Miejsce" style="float: right; margin: 10px;">

Użycie klas CSS

Możesz również przypisać obrazowi klasę CSS i zdefiniować wyrównanie za pomocą stylów. Przykład:

<style>
  .wyrównanie-lewo {
    float: left;
    margin-right: 10px;
  }
  .wyrównanie-prawo {
    float: right;
    margin-left: 10px;
  }
</style>

<img src="obraz.jpg" alt="Krajobraz" class="wyrównanie-lewo">
<img src="obraz2.jpg" alt="Miasto" class="wyrównanie-prawo">

Wykorzystanie elementów blokowych

Możesz również wstawić obrazy w kontenerze lub elemencie blokowym, takim jak <div>, i wyrównać go za pomocą stylów CSS. Przykład:

<div style="text-align: center;">
  <img src="obraz.jpg" alt="Zabytek">
</div>

Pamiętaj, że zaleca się stosowanie stylów CSS do wyrównywania obrazów, ponieważ atrybut align jest przestarzały, a CSS zapewnia większą elastyczność i kontroli nad wyglądem elementów na stronie.