Zawartość

• Kroki
• Metoda 1 z 2: CSS (zalecane)
• Metoda 2 z 2: Atrybut „wyrównaj” w HTML

Atrybut wyrównywać etykietka html> został wycofany od HTML5. Chociaż ten atrybut nadal działa w większości przeglądarek internetowych, zaleca się wyrównywanie obrazów za pomocą kaskadowych arkuszy stylów (CSS). W tym artykule pokażemy, jak wyśrodkować obrazy za pomocą CSS i przestarzałego tagu. wyrównywać.

Kroki

Metoda 1 z 2: CSS (zalecane)

1. 1 Dodaj kod HTML do obrazu. Do wyrównania obrazu użyjesz kaskadowych arkuszy stylów (CSS), ale musisz umieścić go na stronie za pomocą HTML. Poniżej znajduje się przykład użycia tagu obraz> aby wstawić obraz do kodu:

   img src = "pies.webp" alt = "to jest zdjęcie psa">

   • Zamiast pies.webp podmień nazwę pliku obrazu, a po „alt” wpisz opis obrazu. Oznaczający środek dla "class" nie zmieniaj, ponieważ utworzysz klasę CSS o tej nazwie.
2. 2 Znajdź kod CSS. Jeśli Twoja witryna ma osobny plik CSS, otwórz go. Jeśli nie, CSS najprawdopodobniej znajduje się na górze pliku HTML, wewnątrz tagów głowa>... Przewiń na górę pliku, aby znaleźć tagi styl> / styl>.
   • Jeśli tagi styl> / styl> nie, dodaj je. Przeczytaj ten artykuł, aby uzyskać więcej informacji.
3. 3 Dodaj CSS, aby wyrównać obraz. Zamiast „50%” możesz wprowadzić inną wartość, aby obraz pojawił się na stronie. Nie będziesz w stanie wyśrodkować obrazu z wartością „100%”, więc ta liczba powinna być inna.

   .center {wyświetlacz: blok; margines lewy: auto; margines prawy: auto; szerokość: 50%; }

4. 4 Zapisz zmiany. Zapisz plik HTML i plik CSS (jeśli istnieje). Spowoduje to wyśrodkowanie obrazu.
   • Również wewnątrz tagów obraz> mogę dodać aby wyśrodkować inne obrazy.

Metoda 2 z 2: Atrybut „wyrównaj” w HTML

1. 1 Utwórz nowy akapit. Chociaż ta metoda centrowania obrazów jest przestarzała, nadal działa w wielu przeglądarkach. Zalecamy jednak korzystanie z CSS, aby strona działała, gdy przeglądarki przestają obsługiwać określony atrybut. Pamiętaj, że atrybut wyrównywać wyśrodkuje obraz tylko wewnątrz elementu, który go otacza (na przykład wewnątrz tagów p> / p> lub div> / div>). Jako przykład w pliku HTML utworzymy nowy akapit dodając p> w osobnej linii.
2. 2 Dodaj kod HTML do obrazu. Wpisz następujący kod po tagu p>... Użyj tego przykładu jako przewodnika:

   p> img src = "pies.webp" alt = "obrazek" align = "środek">

   • Zamiast pies.webp podmień nazwę pliku obrazu, a po „alt” wpisz opis obrazu.
   • Atrybut środkowy mówi przeglądarce, aby wyświetlić obrazek na środku strony.
3. 3 Zamknij znacznik akapitu. Aby to zrobić, dodaj / p> po tagu ze zdjęciem. Gotowy kod powinien wyglądać mniej więcej tak:

   p> img src = "pies.webp" alt = "zdjęcie" align = "środek"> / p>

4. 4 Zapisz zmiany. Spowoduje to wyśrodkowanie obrazu.