• 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

+1 głos
93 wizyt
pytanie zadane 12 października w HTML i CSS przez FabQ Początkujący (430 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 przez SzkolnyAdmin Maniak (62,720 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 przez VBService VIP (137,830 p.)
edycja 12 października 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 przez qax Mądrala (6,510 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 przez VBService VIP (137,830 p.)
edycja 13 października 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 przez qax Mądrala (6,510 p.)

No też ciekawe rozwiązanie smiley

Podobne pytania

0 głosów
2 odpowiedzi 213 wizyt
pytanie zadane 25 lutego 2020 w HTML i CSS przez Herfodi Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 91 wizyt
0 głosów
1 odpowiedź 77 wizyt
pytanie zadane 21 października 2016 w C i C++ przez kieryk123 Początkujący (300 p.)

85,873 zapytań

134,644 odpowiedzi

298,914 komentarzy

56,739 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 926p. - rucin93
  2. 925p. - Whistleroosh
  3. 912p. - nidomika
  4. 876p. - adrian17
  5. 867p. - Michal Drewniak
  6. 866p. - Mikbac
  7. 863p. - Mateusz Bogdan
  8. 859p. - CC PL
  9. 797p. - Argeento
  10. 704p. - ScriptyChris
  11. 683p. - tokox
  12. 660p. - Vinox
  13. 645p. - TheLukaszNs
  14. 642p. - s. Dorota Kowalewska
  15. 601p. - Marcin Harasimowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...