W tym samouczku zobaczymy, jak wyśrodkować obrazy za pomocą HTML i CSS. Nie jest to wcale skomplikowane i często będziemy go potrzebować na naszych stronach internetowych. Zobaczymy kilka opcji, jedną, w której używamy tylko HTML, inną poprzez użycie CSS i wreszcie przy użyciu Bootstrap.
HTML i CSS to dwa wiodące języki skryptów internetowych w świecie tworzenia stron internetowych i aplikacji. Oba języki współpracują ze sobą w tym zadaniu. Podczas gdy HTML nadaje strukturę stronom internetowym, CSS dba o styl i część wizualną lub dźwiękową. HTML dostarcza tagi, które owijają różne elementy strony iw ten sposób wraz z atrybutami stworzymy szkielet naszej witryny.
Różnice między HTML a CSSPodsumowując, możemy zobaczyć różnice między HTML i CSS w następujący sposób:
- HTML jest łatwiejszy do nauczenia i wdrożenia
- HTML dostępny w wielu językach
- HTML jest lekki i skuteczny
- HTML ma ograniczone bezpieczeństwo
- HTML jest nieco powolny.
- CSS ma większą bibliotekę atrybutów i stylów niż CSS
- CSS poprawia czas ładowania strony.
- CSS ma świetną kompatybilność i łatwą konserwację.
- CSS daje pewne problemy z wydajnością
- CSS nie ma wbudowanych zabezpieczeń
Dzisiaj zaleca się wykonanie tych kroków bezpośrednio za pomocą CSS, ale jeśli jesteś bardziej HTML-em, możesz mieć również następujące opcje.
1. Jak wyśrodkować obraz na stronie internetowej używając tylko HTML
Chociaż robimy te opcje, aby wyśrodkować obraz za pomocą HTML, zobaczymy dwa sposoby na łatwe zrobienie tego.
Wyśrodkuj obraz z kodem HTML i środkowym tagiemW tej prostej opcji wystarczy owinąć obrazek środkowymi etykietami
- Część „src” służy do wskazania adresu ścieżki obrazu.
- Część alt zawiera informacje na stronie internetowej o nazwie obrazu.
Dodatkowo musimy przypisać wysokość i szerokość obrazka w ten sposób:
wysokość = „250” ”
Wyśrodkuj obraz z kodem HTML i środkiemAle jeśli chodzi o obrazy, ta koncepcja centrum, którą widzieliśmy, różni się i lepiej jest użyć wyrównania do środka, więc kod pozostaje następujący:
Jeśli dodamy również tekst, otrzymalibyśmy ten kod:
Ten przykład będzie polegał na wyśrodkowaniu obrazu z tekstem w HTML.
Wyrównaj obraz do HTML za pomocą atrybutu alignJeśli chcemy wyrównać obrazek w poziomie, możemy to zrobić w podobny sposób, jak robimy to z tekstem, czyli użyć atrybutu align w etykietach
lub. Stworzymy kod, w którym pojawi się atrybut z tagiem obrazu. Etykieta jest jedną z tych, które akceptują atrybut align, ale ich zastosowanie jest inne.
Ale jak mówimy, etykieta
Tutaj umieścilibyśmy tekst, który wypełniłby całą prawą część i zawinął umieszczony przez nas obraz. Kontynuujemy wypełnianie tekstu solwatką solwatką solwatką
Zrobimy to samo, aby wyrównać tekst i obraz do prawej po lewej stronie, ale zamieniając „lewo” na „prawo”.
Nie jest to zalecane, ponieważ aspekty rozmieszczenia i stylu należy pozostawić CSS i nie należy ich używać bezpośrednio w HTML. W ten sposób będziemy mieli kod, który będzie łatwiejszy w utrzymaniu i zmianie, ale jeśli w danym momencie potrzebujesz go do małego i szybkiego testu, warto o tym wiedzieć.
2. Jak wyśrodkować obraz na stronie internetowej za pomocą CSS
Tutaj będziemy mieli kod HTML i kod CSS. Zaczynamy od spojrzenia na kod HTML.
Umieściliśmy na obrazku klasę o nazwie centered, która pomoże nam później w stylizacji go w CSS. Poniżej znajduje się kod do wyśrodkowania obrazu.
.center {margines: 10px auto; Blok wyświetlacza; } Możemy również użyć następującego kodu, aby wyrównać obraz za pomocą CSS dla naszej strony internetowej:
.center {margines lewy: auto; margines prawy: auto; }Jeśli to nie zadziała w przeglądarce, ponieważ używana jest metoda wyśrodkowania tekstu, musimy wskazać przeglądarce, że obraz jest elementem blokowym. W ten sposób możemy wyśrodkować go tak, jakby był kolejnym blokiem. Użyjemy tego kodu:
Sprawiamy, że element pojawia się jako blok i nadajemy mu automatyczny margines (wystarczy, że margines jest automatyczny po bokach, na górze i na dole można umieścić co tylko chcesz). Pamiętaj, że jeśli obraz zajmuje całą szerokość, nie zostanie wyśrodkowany.
img.center {wyświetlacz: blok; margines lewy: auto; margines prawy: auto; }
3. Jak wyśrodkować obraz na stronie internetowej za pomocą Bootstrap
Z tym popularnym frameworkiem wszystko jest prostsze, wystarczy umieścić klasę bloku centralnego w obrazie.
Będziesz musiał pobrać Bootstrap i połączyć go lub umieścić swój CDN w naszym kodzie HTML, w tym celu zostawiam link poniżej:
Efekt zastosowania tych kodów możemy zobaczyć na poniższym obrazku:
W ten sposób możemy zarówno wyśrodkować nasze obrazy w HTML, jak i za pomocą CSS, a tym samym sprawić, że prace internetowe będą bardziej udane pod względem estetycznym.
