Jak wyśrodkować obraz w HTML (z ilustracjami)

Atrybut Wyrównać Etykietka uważany za przestarzałe wraz z pojawieniem się HTML5. Chociaż ten atrybut nadal działa w większości przeglądarek internetowych, zaleca się wyrównanie obrazów za pomocą stołów w stylu kaskadowym (CSS). W tym artykule powiemy, jak wyśrodkować obrazy CSS i przestarzałą tagiem Wyrównać.

Kroki

Metoda 1 z 2:

CSS (zalecane)

jeden. Dodaj kod HTML dla obrazu. Aby wyrównać obraz, użyjesz arkuszy stylów kaskadowych (CSS), ale będzie musiał umieścić go na stronie za pomocą HTML. Poniżej znajduje się przykład korzystania z tagu Aby wstawić obraz w kodzie:

  Src ="Pies.jpg" alt ="To jest zdjęcie psa" klasa ="Środek">

Zamiast Pies.jpg Dostosuj nazwę pliku obrazu, a po "Alt" wprowadź opis obrazu. Wartość Środek Dla "klasy" nie zmieniają się, ponieważ utworzysz klasę CSS z tą nazwą.

2. Znajdź kod CSS. Jeśli na stronie znajduje się oddzielny plik CSS, otwórz go. Jeśli nie, kod CSS jest najprawdopodobniej umieszczony na górze pliku HTML w tagach . Przewiń na górę pliku, aby znaleźć tagi .

Jeśli Tagov Nie, dodaj je. Czytać Ten artykuł, Aby uzyskać więcej informacji.

3. Dodaj do kodu CSS, aby wyrównać zdjęcie. Zamiast "50%", możesz wprowadzić kolejną wartość, aby obraz pojawi się na stronie. Certeth Obraz o wartości "100%" nie będzie działać, więc liczba ta powinna być inna.

.Center {Wyświetlacz: Block-Margin Left: Auto-MARGIN-Light: Auto-szerokość: 50% -}

cztery. Zapisz wprowadzone zmiany. Zapisz plik HTML i plik CSS (jeśli jest). Więc wyśrodkuj obraz.

Również wewnątrz Tagov mogę dodać klasa ="Środek", Aby usunąć inne obrazy.

Metoda 2 z 2:

Atrybut "Wyrównaj" w HTML

jeden. Utwórz nowy akapit. Chociaż ta metoda centrujących obrazów jest uważana za przestarzałe, nadal działa w wielu przeglądarkach. Zalecamy jednak używanie CSS do funkcji, gdy przeglądarki przestają zachować określony atrybut. Pamiętaj, że atrybut Wyrównać wyśrodkował obraz tylko wewnątrz elementu, który go otacza (na przykład wewnątrz znaczników lub ). Jako przykład w pliku HTML stworzymy nowy akapit, dodając Na osobnej linii.

2. Dodaj kod HTML dla obrazu. Wprowadź następujący kod po tagu . Użyj tego przykładu jako przewodnika:


 Src ="Pies.jpg" alt ="obrazek" wyrównać ="Środkowy">

Zamiast Pies.jpg Dostosuj nazwę pliku obrazu, a po "Alt" wprowadź opis obrazu.

"Środkowy" atrybut informuje przeglądarkę, że obraz powinien być wyświetlany na środku strony.

3. Zamknij tag akapitowy. Zrobić to dodanie Po tagu sztuki. Gotowy kod powinien wyglądać tak:


 Src ="Pies.jpg" alt ="obrazek" wyrównać ="Środkowy">

cztery. Zapisz wprowadzone zmiany. Więc wyśrodkuj obraz.