• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak wyśrodkować obiekt w pionie i poziomie

VPS Starter Arubacloud
+1 głos
337 wizyt
pytanie zadane 12 października 2021 w HTML i CSS przez FabQ Początkujący (450 p.)
Witam,

Wie ktoś w jaki sposób mogę wyśrodkować obiekt na stronie w pionie i w poziomie. Wiem jak zrobić to w poziomie wystarczy ustawić width na 100% i wstawić w klamry <center> ale nie wiem jak zrobić to w pionie bez ustawiania stałej wysokości.

3 odpowiedzi

+2 głosów
odpowiedź 13 października 2021 przez SzkolnyAdmin Szeryf (86,280 p.)

To i ja dorzucę coś z webowej archeologii :)

Dla rodzica ustaw:

text-align: center;
display: table-cell;
vertical-align: middle;

Zobacz ten artykuł: https://www.freecodecamp.org/news/how-to-center-objects-using-css/

0 głosów
odpowiedź 12 października 2021 przez VBService Ekspert (251,170 p.)
edycja 12 października 2021 przez VBService

Możesz np. bez podawania width i height

<p>Lorem</p>
p {
  position: absolute; /* lub  position: fixed; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

możesz też, za pomocą "kontenera" i flex

<div class="container">
  <div>Lorem</div>
</div>
html, body {
  margin: 0;
}
.container {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Dla demonstracji */
  background-image: linear-gradient(transparent 10%, grey);
}
.container div {
  /* Dla demonstracji */
  background-image: linear-gradient(transparent 10%, orange);
}

 

 

możesz też spróbować z:  display: grid; , czy  display: table ( zapytaj wujka google  wink  )

 

 

CENTERING THINGS by css ] [ Centering in CSS: A Complete Guide ]
Quick CSS Trick: How To Center an Object Exactly In The Center ]
How to Center Anything with CSS - Align a Div, Text, and More ]

0 głosów
odpowiedź 12 października 2021 przez qax Dyskutant (8,060 p.)

Ja jeszcze mogę dodać i wspomnieć o starych technikach wyśrodkowania elementów w poziomie (nie polecam tego używać, ale to dla wiedzy historycznej) smiley:

Sposób 1:

div {
   margin: 0 auto;
}

Sposób 2:

div {
   width: 500px;
   height: 300px;
   left: 50%;
   top: 50%;
   margin-left: -250px; /* połowa szerokości */
   margin-top: -150px; /* połowa wysokości */
}

Za to działa niemal we wszystkich przestarzałych przeglądarkach. Oczywiście, można jeszcze użyć JavaScriptu, ale nie polecam dla początkujących.

1
komentarz 12 października 2021 przez VBService Ekspert (251,170 p.)
edycja 13 października 2021 przez VBService

@qax, z tego co się orientuję to, żeby zadziałało  wink

 - w sposobie 1 brakuje: width dla danego div-a np.

div {
  width: 100px; /*  lub np.  width: 50vw; */
  margin: 0 auto;
}

 - w sposobie 2 brakuje: position dla danego div-a np.

div {
   position: absolute; /*  lub  position: fixed; */
   width: 500px;
   height: 300px;
   left: 50%;
   top: 50%;   
   margin-left: -250px; /* połowa szerokości */
   margin-top: -150px; /* połowa wysokości */
}

 

 

P.S Pozwoliłem sobie na taki "eksperyment" ze sposobem 1  wink

div {
  width: 100px;
  margin: 0 auto;
  margin-top: calc(100vh * 0.5);
}
* {
  margin: 0;
}
div {
  width: 100px;
  margin: 0 auto;
  line-height: 100vh;
}

 

komentarz 13 października 2021 przez qax Dyskutant (8,060 p.)

No też ciekawe rozwiązanie smiley

Podobne pytania

0 głosów
2 odpowiedzi 573 wizyt
pytanie zadane 25 lutego 2020 w HTML i CSS przez Herfodi Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 777 wizyt
pytanie zadane 10 lipca 2021 w HTML i CSS przez Doge Gaduła (3,320 p.)
0 głosów
1 odpowiedź 114 wizyt
pytanie zadane 21 października 2016 w C i C++ przez kieryk123 Początkujący (300 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...