Jak poziomo wyśrodkować div za pomocą CSS

Mia Chevalier

Niedziela, 16 czerwca 2024 02:31:39

Opanowanie wyrównania Div za pomocą CSS

Centrowanie elementów w poziomie w CSS jest częstym zadaniem, przed którym stają twórcy stron internetowych. Niezależnie od tego, czy jest to wyrównywanie przycisku, obrazu czy elementu div, osiągnięcie idealnego wyrównania może czasami być trudne. W tym przewodniku omówimy różne metody poziomego wyśrodkowania a

w innym

za pomocą CSS.

Rozumiejąc i stosując te techniki, możesz mieć pewność, że Twoje elementy internetowe zostaną umieszczone dokładnie tam, gdzie chcesz. Omówimy różne podejścia, w tym metody flexbox, grid i tradycyjne, aby zapewnić wszechstronne zrozumienie tej niezbędnej umiejętności CSS.

Komenda	Opis
display: flex;	Definiuje kontener elastyczny i włącza układ Flexbox.
justify-content: center;	Wyśrodkowuje elementy poziomo w elastycznym pojemniku.
align-items: center;	Wyśrodkowuje elementy w pionie w elastycznym pojemniku.
place-items: center;	Wyśrodkowuje elementy zarówno w poziomie, jak i w pionie w kontenerze siatki.
transform: translate(-50%, -50%);	Przesuwa element o 50% jego własnej szerokości i wysokości, aby go wyśrodkować.
position: absolute;	Ustawia element względem najbliższego pozycjonowanego przodka.
top: 50%;	Umieszcza element 50% od góry elementu zawierającego.
left: 50%;	Umieszcza element 50% od lewej strony elementu zawierającego.

Centrowanie elementów za pomocą Flexbox, Grid i tradycyjnego CSS

Pierwszy skrypt pokazuje, jak wyśrodkować plik a

za pomocą . Przez ustawienie w kontenerze nadrzędnym elementy podrzędne stają się elementami elastycznymi. The property centruje te elementy w poziomie, podczas gdy align-items: center; centruje je w pionie. Ta metoda jest bardzo wszechstronna i dobrze sprawdza się w przypadku układów dynamicznych.

W drugim skrypcie używamy aby osiągnąć podobne rezultaty. Poprzez zastosowanie do kontenera nadrzędnego i , elementy podrzędne są wyśrodkowane zarówno w poziomie, jak i w pionie. Ta metoda jest szczególnie przydatna w przypadku układów opartych na siatce. Wreszcie tradycyjna metoda polega na ustawianiu position: absolute; na elemencie podrzędnym i używając I z wyśrodkować go w obrębie elementu nadrzędnego. To podejście jest skuteczne w przypadku elementów o stałym rozmiarze.

Używanie Flexboksa do poziomego wyśrodkowywania elementu Div

HTML i CSS z Flexboxem

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Centrowanie elementu Div za pomocą siatki CSS

HTML i CSS z układem siatki

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Tradycyjna metoda centrowania za pomocą CSS

HTML i CSS z funkcją automatycznego marginesu

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Zaawansowane techniki centrowania elementów

Inną metodą centrowania elementów w poziomie w pojemniku jest użycie tzw nieruchomość. To podejście jest szczególnie skuteczne w przypadku elementów inline-block lub inline. Poprzez zastosowanie do kontenera nadrzędnego, wszystkie elementy podrzędne zostaną wyśrodkowane poziomo. Jednak ta metoda nie działa w przypadku elementów na poziomie bloków, chyba że zostaną one przekonwertowane na blok wbudowany.

Dodatkowo możesz skorzystać z właściwość centrowania elementów na poziomie bloku. Ustawiając lewy i prawy margines elementu na automatyczny, możesz wyśrodkować go w poziomie w jego kontenerze nadrzędnym. Technika ta jest prosta i sprawdza się dobrze w przypadku elementów o stałej szerokości. Połączenie tych metod z nowoczesnymi technikami układu CSS, takimi jak Flexbox i Grid, zapewnia kompleksowy zestaw narzędzi do dokładnego wyrównywania elementów zgodnie z potrzebami.

Jak wyśrodkować element wbudowany?
Używać na kontenerze nadrzędnym, aby wyśrodkować elementy wbudowane.
Czy mogę użyć marginesu: auto; wyśrodkować element blokowy?
Tak, ustawienie po lewej i prawej stronie wyśrodkuje element blokowy.
Jaka jest różnica między Flexbox a Grid w zakresie centrowania?
jest używany w układach jednowymiarowych, natomiast dotyczy układów dwuwymiarowych.
Jak wyśrodkować element o stałej szerokości za pomocą CSS?
Używać Lub z
Czy mogę wyśrodkować elementy w pionie za pomocą Flexbox?
Tak, użyj do centrowania elementów w pionie w elastycznym pojemniku.
Czy tekst wyrównuje: do środka; pracować dla elementów blokowych?
NIE, działa tylko dla elementów inline lub inline-block.
Jak wyśrodkować wiele elementów w kontenerze?
Używać z I
Co to jest miejsce-przedmioty: centrum; w siatce?
centruje elementy zarówno w poziomie, jak i w pionie w pojemniku siatkowym.
Czy możliwe jest wyśrodkowanie elementów bez Flexbox lub Grid?
Tak, używając metod takich jak , , Lub może również centrować elementy.

Podsumowanie technik centrowania CSS

Zrozumienie sposobu wyśrodkowania elementów w poziomie przy użyciu różnych metod CSS jest niezbędne do tworzenia atrakcyjnych wizualnie układów stron internetowych. Opanowując techniki takie jak , , I deweloperzy mogą zapewnić, że ich projekty będą zarówno funkcjonalne, jak i estetyczne. Eksperymentowanie z tymi metodami zapewni głębsze zrozumienie możliwości CSS.