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

Wysrodkowanie login screenu - Ktora metoda?

Object Storage Arubacloud
+1 głos
207 wizyt
pytanie zadane 17 stycznia 2021 w HTML i CSS przez Greeenone Pasjonat (16,100 p.)
Dzien dobry,

Mam takie pytanie dotyczace tego jak srodkujecie login screen w RWD. Znam dwie metody, ale nie wiem ktora jest bardziej poprawna.

Piersza jest wrzucenie wszystkiego do jednego diva a nastepnie wysrodkowanie za pomoca position absolute, top 50, left 50

Druga metoda, to uzycie flex'a a nastepnie uzycie justify-content space-arround

Drugi sposob wydaje mi sie lepszy ale rozjezdza sie gdy wysuwa sie klawiatura.

Ktory sposob jest bardzie odpowiedni? Czy moze istnieje cos innego?

4 odpowiedzi

+2 głosów
odpowiedź 17 stycznia 2021 przez krissto7 Gaduła (3,100 p.)
Nie wiem dokładnie co chcesz wyśrodkować , ale są różne metody

jak używasz pozycjonowania to trzeba dołożyć transform: translate(-50%,-50%);

czasami można wyśrodkować za pomocą margin: 0 auto;

jak masz jeden wyraz/zdanie w jednej lini to można użyć line-height: wysykość diva,

i standardowo display:flex, justify-content:center, aling-items:center;
0 głosów
odpowiedź 17 stycznia 2021 przez Anedroid Obywatel (1,530 p.)
Co do pierwszego sposobu, to takie wyśrodkowanie nie będzie równe. Na środku będzie się znajdował lewy górny róg div-a, a nie jego środek. Ja bym użył flexboxa.
1
komentarz 17 stycznia 2021 przez CSSoup Mądrala (6,460 p.)
Tak, aby pierwszy był poprawny to trzeba użyć jeszcze transform: translate(-50%, -50%);
0 głosów
odpowiedź 17 stycznia 2021 przez niezalogowany

Użyłbym Flexbox'a .smiley

0 głosów
odpowiedź 17 stycznia 2021 przez VBService Ekspert (254,570 p.)
edycja 17 stycznia 2021 przez VBService

Wymienione zostało już chyba wszystko, ale ja dodam swoje 3 grosze, można jeszcze tak wink (aczkolwiek to jak rzeźbienie w g....ie)

<div class="grid-container">
  <div class="margin-left"></div>
  <div class="center">Jestem na środku</div>
  <div class="margin-right"></div>  
</div>
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 0fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "margin-left center margin-right";
  width: 100vw;
  height: 100vh;
}
.margin-left { 
  grid-area: margin-left;
}
.center {
  white-space: nowrap;
  grid-area: center;
  margin-top: 50vh;
}
.margin-right { 
  grid-area: margin-right;
}

Ja osobiście preferuję

<div class="center">Mam wrażenie, że jestem na środku</div>
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
.center {
  position: absolute;
  font: 1.2em/2.2em monospace;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

 

Podobne pytania

0 głosów
1 odpowiedź 300 wizyt
+1 głos
1 odpowiedź 262 wizyt
pytanie zadane 16 sierpnia 2021 w HTML i CSS przez TomaszR Nowicjusz (170 p.)
0 głosów
0 odpowiedzi 214 wizyt

92,687 zapytań

141,598 odpowiedzi

320,087 komentarzy

62,047 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

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!

...