W przypadku wyświetlania obrazów na stronie, ich wyśrodkowanie jest niezbędne. Właściwe wyrównanie poprawia strukturę strony i pomaga użytkownikom zrozumieć Twoją treść.
Aby poprawnie wyśrodkować obrazek, uczyń go elementem na poziomie bloku (dodaj regułę do nagłówka strony lub podlinkowanego zewnętrznego pliku CSS). Następnie ustaw na align-items z wartością center.
Metoda 1: Text-align
Kiedy musisz wyśrodkować obrazek w html, masz kilka możliwości. Jednym z najczęstszych sposobów jest text-align.
Text-align to właściwość CSS, która ustawia poziome wyrównanie zawartości na poziomie inline wewnątrz elementu blokowego lub komórki tabeli. Można ją ustawić na lewo, prawo, środek lub justowanie.
Domyślną wartością text-align jest left, co powoduje wyrównanie zawartości do lewej strony elementu. Możesz także wybrać wyrównanie do prawej, co spowoduje przesunięcie zawartości do prawej strony elementu.
Musisz jednak pamiętać, że ustawienie wartości text-align elementu na prawo nie spowoduje wyrównania go do lewej lub prawej strony bloku lub rzutni.
Innym problemem jest to, że jeśli ustawisz właściwość text-align na prawo dla elementu, który jest ustawiony na dziedziczenie, element nie zostanie wyrównany do swojego bezpośredniego rodzica. Dzieje się tak dlatego, że bezpośredni rodzic przyjmuje wartości, które są mu przypisane.
Tekst wyrównany do prawej jest najrzadziej spotykanym typem wyrównania tekstu, ale można go wykorzystać do stworzenia ciekawego lub niekonwencjonalnego wyglądu. Jest często używany na okładkach czasopism, w CV, na plakatach i wizytówkach. Może być nieco trudniejszy do odczytania niż inne rodzaje tekstu, ale może też sprawić, że treść bardziej zapadnie w pamięć.
Metoda 2: Margines
Istnieje wiele sposobów wyśrodkowania obrazka html, a właściwa metoda dla Twojej strony zależy od jej układu. Jednym ze sposobów wyśrodkowania obrazka html jest użycie właściwości margin.
Tej właściwości można użyć do wyśrodkowania obrazka w poziomie. Można jej używać w połączeniu z innymi właściwościami, takimi jak text-align, aby mieć pewność, że obrazki są wyśrodkowane we właściwym miejscu.
Właściwość margin może być jednak stosowana tylko do elementów na poziomie bloku. Oznacza to, że przed użyciem tej właściwości musisz przekształcić obrazek w element blokowy.
Innym sposobem wyśrodkowania obrazka w poziomie jest użycie właściwości flex. Jest to świetny sposób na wyrównanie obrazka bez konieczności obliczania marginesów.
Aby użyć tej metody, musisz zdefiniować obrazek z właściwością display: block i ustawić marginesy lewy i prawy na auto. Właściwość margin:auto automatycznie ustawi lewy i prawy margines obrazka na tę samą wartość, zapewniając jego wyśrodkowanie.
Metoda 3: Flexbox
W przypadku wyśrodkowywania obrazka html najłatwiejszym sposobem jest użycie flexbox. Dzieje się tak dlatego, że flexbox jest efektywną metodą układania, wyrównywania i rozdzielania przestrzeni między elementami w kontenerze.
Aby użyć flexbox do wyśrodkowania obrazka html, zawiń go w element blokowy, taki jak div. Następnie zdefiniuj właściwości align-items i justify-content na „center”. Dzięki temu przeglądarka wyśrodkuje element flexbox (obrazek w div) w pionie i poziomie.
Następnie ustaw wysokość kontenera div na proporcjonalną wysokość. Jest to ważne, ponieważ zapewnia, że element flex (obrazek) zmieści się wewnątrz div bez naruszania układu.
W przeszłości, jeśli chciałeś wyśrodkować swoje elementy, musiałeś uciekać się do różnych hacków i reguł. Dzięki flexbox wyśrodkowanie jest teraz prostą regułą zawartą w CSS.
Innym rodzajem właściwości elastycznego elementu jest order, która zmienia domyślne uporządkowanie elementu flex. Może być przydatna do zmiany układu, ale powinna być używana tylko wtedy, gdy konieczna jest zmiana układu kodu HTML.
