Centrum bootstrap

Bootstrap Framework to potężne narzędzie do projektowania stron internetowych. Oferuje wiele klas o predefiniowanych stylach. Mówiąc dokładniej, w bootstrap tekst może być uzasadniony za pomocą „Wysokość tekstu„Klasa i wyrównanie elementów po prawej, lewej i środkowej”prawy tekst”,„LEFT", I "Centrum tekstu”Klasy są wykorzystywane. Elastyczne elementy można również wyrównać w lewo, w prawo lub w środku za pomocą określonych klas.

Ten zapis poprowadzi Cię:

• Jak wyśrodkować tekst w poziomie za pomocą bootstrap?
• Jak wyśrodkować kolumnę poziomo za pomocą bootstrap?
• Jak wyśrodkować obraz w poziomie za pomocą bootstrap?

Jak wyśrodkować tekst w poziomie za pomocą bootstrap?

W bootstrap tekst może być uzasadniony za pomocą „LEFT”,„prawy tekst", I "Centrum tekstu„Zajęcia. „„Centrum tekstu„Klasa jest najczęściej używana do wyśrodkowania elementów poziomo.

Przykład

Poniższy przykład pokazuje, jak wyśrodkować tekst w poziomie za pomocą bootstrap:

• Dodać "”Element i przypisz go klasę jako„Centrum tekstu".
• W tej klasie dodaj „

  „Element, aby określić niektóre treści tekstowe.

Html

Witamy w Linuxhint!

Można zauważyć, że tekst ma teraz wyrównanie centrum poziomego:

Jak wyśrodkować kolumnę poziomo za pomocą bootstrap?

Siatka w bootstrapie zawiera rzędy i kolumny. „„wiersz„Klasa tworzy rząd i„przełęcz”Definiuje kolumnę.

Przykład

Aby uzyskać praktyczną demonstrację, sprawdź poniższy przykład:

• Dodać "„Element i przypisz go klasę„ Row ”,„ D-Flex ”i„ Justify-Content-Center ”.
• "D-flex”Sprawia, że ​​wyświetlacz elementu jest eliminowany.
• "Justify-Content-Center„Centrum poziome wyrównuje elementy.
• "Col-4„Klasa jest wykorzystywana do dostosowania kolumny:

wyśrodkowana kolumna

Wyjście

Jak wyśrodkować obraz w poziomie za pomocą bootstrap?

Element obrazu można wyrównać w centrum za pomocą „D-flex" I "Justify-Content-Center".

Przykład

Ten przykład koncentruje obraz, wykonując kroki:

• Najpierw dodaj „”Element i przypisz go„D-flex" I "Justify-Content-Center„Zajęcia.
• Wewnątrz utworzonego pojemnika dodaj kolejny „”Z klasą„karta".
• W pojemniku „karty” określ „-ciało karty” jako nazwę klasy.
• Zawierać "„Tag, aby dodać obraz z„src”,„Alt", I "szerokość”Atrybuty do określania źródła dodanego obrazu, tekstu alternatywnego i domyślnej szerokości.

Html

Wyjście

Chodzi o to, w jaki sposób wyśrodkować elementy w bootstrapie.

Wniosek

Aby wyśrodkować elementy poziomo, głównie „„Centrum tekstu„Klasa jest używana. Elementy mogą być elastyczne za pomocą „D-flex" klasa. Elastyczne elementy mogą być wyrównane w środku za pomocą „Justify-Content-Center" klasa. Ten post wyjaśnił metody wyrównania kilku elementów poziomo.