Jak wyśrodkować obraz poziomo w bootstrapie?

Opracowując dowolną aplikację, obrazy odgrywają istotną rolę w zwiększaniu jej wizualnej reprezentacji. Jednak obrazy te muszą mieć odpowiedni układ i wyrównanie. Aby wyrównać obrazy, „IMG-Fluid”,„Float-left", I "float-right”Klasy można użyć. Mówiąc dokładniej, aby wyrównać obraz, „Centrum tekstu”I„ „MX-AUTO D-BLOCK”Klasy są wykorzystywane.

Ten zapis wyjaśni, jak wyśrodkować obraz poziomo w bootstrapie.

Warunek: Dodaj obraz

W HTML dodaj obraz za pomocą „”Tag, postępując zgodnie z podanymi instrukcjami:

• > Dodaj „" element.
• W tym znaczniku „” dodaj obraz za pomocą „" element z atrybutami „src”, „szerokość” i „alt”.
• „„src”Ustawia ścieżkę obrazu.
• „„szerokość”Dostosowuje rozmiar obrazu.
• „„Alt”Określa alternatywny tekst na wypadek, gdyby obraz nie mógł załadować.

Html

Wyjście

Jak wyśrodkować obraz w poziomie w bootstrap za pomocą klasy „Center tekstu”?

Bootstrap „Centrum tekstu„Centrum klasy wyrównuje obrazy. Ta klasa ma predefiniowane CSS ”tekst-align„Własność o wartości”Centrum”, Który pomaga w ustawianiu środka wyrównania obrazu w poziomie.

Przykład

Przypisz „Centrum tekstu„Klasa dla rodzica”„Element, jak pokazano tutaj:

Wyjście

Jak wyśrodkować obraz poziomo w bootstrap za pomocą klasy „MX-AUTO D-BLOCK”?

„„MX-AUTO”W połączeniu z„D-block„Klasa, wyrównuje obraz w centrum. „MX-Auto” to CSS ”margines„Własność o wartości”automatyczny”, A właściwość„ D-block ”to CSS”wyświetlacz„Własność o wartości”blok".

Przykład

Zaimplementujmy klasy „MX-Auto” i „D-block” do elementu „” i zobacz efekt:

Wyjście

W ten sposób możesz wyśrodkować obraz poziomo w bootstrapie.

Wniosek

Aby wyśrodkować obraz poziomo w ładie bootstrap, najpierw utwórz plik HTML i dodaj do niego obraz za pomocą „”Tag. Przypisz go wymagane atrybuty, takie jak „src”,„Alt”,„szerokość" i więcej. Dodaj "Centrum tekstu„Klasa do elementu nadrzędnego obrazu w celu dostosowania środkowego wyrównania obrazu. „„MX-AUTO„Klasa, w połączeniu z„D-block„Klasa, może być również używana w tym celu. Ten zapis wyjaśnił, jak wyśrodkować obraz w poziomie za pomocą bootstrap.