Jump to content
Sign in to follow this  
-n3veR

Sposoby wyśrodkowania elementu w pionie i poziomie

Recommended Posts

Cześć i czołem

Ostatnio pojawiły się pytania "jak wyśrodkować dany kontener w pionie i poziomie?". Aby zapobiec tłumaczeniu jednego i tego samego milion razy, postanowiłem naskrobać "poradnik". Mam nadzieję, że komuś się przyda

 

Zatem do rzeczy. Istnieją 4 drogi rozwiązania problemu - może jest jeszcze kilka(naście (?)), ale ja przedstawiam tylko tyle. Jeżeli ktoś będzie mieć chęć, to niech uzupełni temat o swoje przykłady.

 

Bazować będziemy na takim układzie HTML:

Spoiler

<div class="parent">
  <div class="child"></div>
</div>

 

 

No i CSS:

Spoiler

.parent {
  background: #8BC34A;
  height: 100vh;
  position: relative;
  width: 100%;
}
.child {
  background: #689F38;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

 

 

Najprostszy i najnowszy sposób - FLEX:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

Wersja 1 ABSOLUTE:

.child {
  margin: auto;  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Wersja 2 ABSOLUTE:

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

No i oczywiście sposób, z którym większość ma problem VERTICAL-ALIGN:

.parent {
  text-align: center;
  font-size: 0;
}
.child {
  display: inline-block;
  vertical-align: middle;
}
.parent::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

Całość - 4 wersje obok siebie - możecie zobaczyć u mnie: 

 

  • Like 6

Share this post


Link to post

Przy flexie trzeba pamiętać o tym, że rodzic musi mieć określoną wysokość i również posiadać display: flex ☺️

Share this post


Link to post
1 godzinę temu, rogue napisał:

Przy flexie trzeba pamiętać o tym, że rodzic musi mieć określoną wysokość i również posiadać display: flex ☺️

Przestudiuj jeszcze raz kod flexa. To rodzic ma nadane wartości dodatkowe, a nie dziecko

Share this post


Link to post
18 minut temu, Salva napisał:

Przestudiuj jeszcze raz kod flexa. To rodzic ma nadane wartości dodatkowe, a nie dziecko

 

@rogue nic nie pisał o dziecku 

Share this post


Link to post
Godzinę temu, Salva napisał:

Przestudiuj jeszcze raz kod flexa. To rodzic ma nadane wartości dodatkowe, a nie dziecko

 

Wait, nie spojrzałem na ten kod CSS co jest w spoilerze

Ale chodzi o to, że ja zawszę robiłem tak, że i rodzic i dziecko posiada display: flex z tym, że rodzic zawiera jeszcze dodatkowe wartości. 

  • Like 2

Share this post


Link to post
56 minut temu, Ardex napisał:

@rogue nic nie pisał o dziecku 

 

2 godziny temu, rogue napisał:

rodzic musi mieć określoną wysokość i również posiadać display: flex

@Ardex zaznaczyłem słowo klucz

 

9 minut temu, rogue napisał:

ja zawszę robiłem tak, że i rodzic i dziecko posiada display: flex

Dziecko już tego nie potrzebuje - chyba że chcesz jeszcze coś wyśrodkować "w dziecku"  brzmi dziwnie, ale wiadomo o co chodzi.

Share this post


Link to post
10 minut temu, Salva napisał:

Dziecko już tego nie potrzebuje - chyba że chcesz jeszcze coś wyśrodkować "w dziecku"  brzmi dziwnie, ale wiadomo o co chodzi.

 

No wiadomo, ale byłem pewny, że na tutku, który swego czasu przeglądałem rodzić jak i dziecko miały identyczną wartość dla display, jak uda mi się znaleźć to podeślę, ale w sumie i tak nie jest to jakiś olbrzymi błąd a jedynie dodatkowa linijka w CSS, która po kompresji będzie zajmować tyle co nic :v 

  • Like 2

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...