Jak pionowo wyśrodkować element DIV dla wszystkich przeglądarek za pomocą CSS

W tworzeniu stron internetowych kluczowe jest prawidłowe utworzenie układu elementu. Jednak wiele właściwości CSS, takich jak elastyczne pudełko CSS3, jest przydatnych do regulacji układu stron internetowych i elementów HTML. Elastyczne pudełko służy do układania stron internetowych i aplikacji w sposób rekurencyjny. Ten tryb FlexBox pomaga tworzyć układy dla złożonych stron internetowych i aplikacji.

Ten post poprowadzi Cię, jak wyśrodkować element DIV dla wszystkich przeglądarek za pomocą CSS w pionie.

Jak wyrównać element DIV za pomocą CSS?

Element DIV można wyrównać pionowo, wykorzystując właściwość wyświetlania „przewód„Wraz z CSS”Wyrównanie”Własność i„justify-content" nieruchomość. Właściwość „wyrównania-elementów” wyrównuje element pionowo, a właściwość „uzasadniona” wyrównuje treść poziomo.

Przykład: jak pionowo wyśrodkować element DIV z CSS?

W HTML najpierw dodaj „”Element i przypisz go klasa„główna zawartość". Pomiędzy tagami „” dodaj „”Element z następującymi atrybutami:

• "src„Atrybut jest wykorzystywany do określenia adresu URL obrazu.
• "Alt”Atrybut definiuje jakiś tekst, który wyświetli się zamiast obrazu, jeśli nie załaduje.
• "szerokość„Atrybut służy do dostosowania szerokości obrazu.
• Następnie dodaj „

  „Element do osadzenia akapitu na stronie.

Oto kod HTML:

Laptop to przenośny komputer znany również jako komputer notebook.

W CSS określamy kilka właściwości stylizacji Div.

Stylowa klasa „główna”

.główna zawartość
Wysokość: 50%;
kolor tła: #46C2CB;
Rozmiar czcionki: 24px;
Wyściółka: 10px;

Następujące właściwości CSS są zdefiniowane w „główna zawartość" klasa:

• "wysokość„Właściwość służy do dostosowania wysokości pojemnika.
• "kolor tła”Definiuje kolor tła elementu.
• "rozmiar czcionki”Określa rozmiar czcionki elementu.
• "wyściółka„Właściwość ustawia przestrzeń wokół treści elementu.

Z wyjścia możesz zauważyć, że zawartość elementu DIV nie ma w centrum:

Idźmy naprzód, aby zastosować właściwości CSS, które pomagają wyśrodkować „„Element pionowo. Dodaj te właściwości do klasy „główna zawartość”, Które są używane do dostępu do elementu:

Wyświetlacz: Flex;
Wyrównanie: Center;

Oto opis:

• "wyświetlacz" nieruchomość "przewód”Służy do uczynienia układu DIV elastycznego dla swojego elementu.
• "Wyrównanie„Właściwość CSS jest ustawiona jako„Centrum”, Który pionowo wyrównuje elementy div.

Wyjście

Nauczyłeś się, jak wyśrodkować element div pionowo dla wszystkich przeglądarek za pomocą CSS.

Wniosek

Aby pionowo wyśrodkować element DIV, CSS ”wyświetlacz„Nieruchomość jest wykorzystywana z„przewód" wartość. Ta wartość sprawia, że ​​kontener jest elastyczny do swoich elementów. Aby pionowo wyrównać element DIV, dostosuj „Wyrównanie”Właściwość i przypisz to„Centrum" wartość. Ten blog pokazał, jak używać CSS do pionowo centralnych elementów div we wszystkich przeglądarkach.