W tworzeniu stron internetowych kluczowe jest odpowiednie stworzenie layoutu elementu. Jednak wiele właściwości CSS, takich jak CSS3 Flexible Box, jest przydatnych do dostosowywania układu stron internetowych i elementów HTML. Flexible Box służy do rekurencyjnego organizowania stron internetowych i aplikacji. Ten tryb Flexbox pomaga tworzyć układy dla złożonych stron internetowych i aplikacji.
W tym poście dowiesz się, jak wyśrodkować element div we wszystkich przeglądarkach korzystających z CSS w pionie.
Jak wyrównać element div za pomocą CSS?
Element div można wyrównać w pionie, korzystając z właściwości display „ przewód ” wraz z CSS „ wyrównaj elementy „własność” i „ uzasadnij treść ' własność. Właściwość „align-items” wyrównuje element w pionie, a właściwość „justify-content” wyrównuje zawartość w poziomie.
Przykład: Jak pionowo wyśrodkować element div za pomocą CSS?
W HTML najpierw dodaj „
- “ źródło ” służy do określenia adresu URL obrazu.
- “ wszystko ” definiuje tekst, który zostanie wyświetlony zamiast obrazu, jeśli nie uda się go załadować.
- “ szerokość Atrybut ” służy do dostosowania szerokości obrazu.
- Następnie dodaj „ ”, aby osadzić akapit na stronie.
Oto kod HTML:
< dz klasa = 'główna zawartość' >< img źródło = '/images/laptop-notatnik.jpg' wszystko = 'Laptop z notatnikiem i długopisem' szerokość = „300” >
< p > Laptop to znany również komputer przenośny jak komputer przenośny. p >
dz >
W CSS określimy kilka właściwości stylizacyjnych dla elementu div.
Styl „main-content” Klasa
.główna zawartość {Wysokość: pięćdziesiąt % ;
kolor tła: #46C2CB;
rozmiar czcionki: 24px;
wypełnienie: 10px;
}
Następujące właściwości CSS są zdefiniowane w „ główna zawartość ' klasa:
- “ Wysokość ” służy do dostosowania wysokości kontenera .
- “ kolor tła ” określa kolor tła elementu.
- “ rozmiar czcionki ” określa rozmiar czcionki elementu.
- “ wyściółka ” określa przestrzeń wokół zawartości elementu.
Z danych wyjściowych można zauważyć, że zawartość elementu div nie znajduje się w środku:
Przejdźmy dalej, aby zastosować właściwości CSS, które pomogą wyśrodkować „
” w pionie. Dodaj te właściwości do klasy „ główna zawartość ”, które są używane do uzyskiwania dostępu do elementu : wyświetlacz: przewód ;
elementy wyrównania: środek;Oto opis:
- “ wyświetlacz ' własność ' przewód ” jest używany, aby układ div był elastyczny w stosunku do jego elementu.
- “ wyrównaj elementy ” Właściwość CSS jest ustawiona jako „ Centrum ”, co spowoduje pionowe wyrównanie elementów div.
Wyjście
Nauczyłeś się, jak wyśrodkować element div w pionie we wszystkich przeglądarkach korzystających z CSS.
Wniosek
Aby pionowo wyśrodkować element div, CSS „ wyświetlacz ” właściwość jest wykorzystywana z „ przewód ' wartość. Ta wartość sprawia, że kontener
jest elastyczny w stosunku do swoich elementów. Aby pionowo wyrównać element div, dostosuj „ wyrównaj elementy ” i przypisz jej „ Centrum ' wartość. Ten blog pokazał ci, jak używać CSS do pionowego wyśrodkowania elementów div we wszystkich przeglądarkach.