Jak wyśrodkować obraz w Div w poziomie?

• Jak wyśrodkować obraz w Div w poziomie?
• Własność marginesu
• Moduł Flexbox
• Układ widoku siatki
• Atrybut pozycji

Jak wyśrodkować obraz w Div w poziomie?

Deweloper może wykorzystać właściwość margin, moduł Flexbox, układ Grid View i atrybut Position, aby wyśrodkować obraz w div w poziomie. Postępuj zgodnie z poniższym przewodnikiem, aby wyśrodkować obraz w poziomie w znaczniku div.

Załóżmy, że istnieje div, w którym obraz jest umieszczony w pliku HTML w następujący sposób:

Obraz uzyskuje szerokość i wysokość 50% oraz klasę „obrazu”.

Korzystanie z właściwości marginesu

Użytkownicy mogą dodawać przestrzeń wokół elementów HTML za pomocą właściwości margin. Przypisuje margines zgodnie z przestrzenią dostępną po zmianie rozmiaru ekranu okna. Na przykład ustawia margines lewy i prawy na auto, a właściwość wyświetlania na blok:

Po wykonaniu powyższego przykładu strona wygląda następująco:

Powyższe dane wyjściowe pokazały, że obraz jest teraz na środku.

Korzystanie z modułu Flexbox

„ flexbox ” to moduł zawierający pełny zestaw właściwości. W naszym przypadku wybierz klasę elementu głównego i użyj flex jako wartości właściwości display. Ustaw środek jako wartość dla „ uzasadnij treść ' I ' wyrównaj elementy ' nieruchomości:

Strona wygląda tak, po wykonaniu kodu:

Powyższe dane wyjściowe pokazują, że obraz jest wyświetlany w środku elementu div z kolorem tła ustawionym na „niebieski”.

Korzystanie z modułu układu widoku siatki

Układ widoku siatki ma 12 kolumn, a całkowita szerokość jest ustawiona na 100% i umieszcza każdy element w określonej pozycji na stronie:

W powyższym fragmencie kodu wartość „grid” jest przypisana do właściwości display. Podczas gdy „umieść element” jest używany jako skrót dla właściwości „justify-content” i „align-items”:

Dane wyjściowe uwierzytelniają, że obraz znajduje się w środku elementu div przy użyciu metody siatki:

Korzystanie z atrybutu pozycji

Ustawiając pozycję klasy głównej na wartość względną, a klasy obrazu na wartość bezwzględną. Obraz może być wyświetlany na środku elementu div:

Obraz jest przesuwany na lewo od „50%”, a następnie przekształcany z powrotem na „-50%” na osi X. Wyświetla obraz w środku elementu div poziomo:

W ten sposób obraz można wyśrodkować w poziomie w div.

Wniosek

Aby poziomo ustawić obraz w elemencie div, użyj „ margines ”, „ elastyczny moduł ”, „ układ siatki ' I ' pozycja ' nieruchomości. „ margines ” właściwość left i right jest ustawiona na auto. „Moduł elastyczny” i „Układ siatki” ustawiają wyświetlacz odpowiednio na wygięcie i siatkę oraz używają opcji „ umieść przedmiot “ Właściwość do wyśrodkowania obrazu. Właściwość position ustawia wartość względną w stosunku do klasy głównej i bezwzględną w stosunku do klasy obrazu i wykorzystuje właściwości „left” i „transform”. Ten blog z powodzeniem pokazał, jak wyśrodkować obrazy w div w poziomie.