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

Wyśrodkowanie boxów w pionie

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
308 wizyt
pytanie zadane 7 stycznia 2018 w HTML i CSS przez ziomek7 Obywatel (1,060 p.)
Hej, zrobiłem główne menu boxowe, ale mam problem. Nie moge ustawić ich idealnie po środku w pionie. Próbowałem już wszystkiego.

Pliki: https://jsfiddle.net/ypw8fdag/

Zdj problemu: http://ifotos.pl/zobacz/apng_qxanqea.png

3 odpowiedzi

+2 głosów
odpowiedź 7 stycznia 2018 przez pablop76 VIP (123,540 p.)
komentarz 15 stycznia 2018 przez ziomek7 Obywatel (1,060 p.)
zaznajomiłem się z lekturą, próbowałem zastosować, ale nadal nwm jak
1
komentarz 15 stycznia 2018 przez pablop76 VIP (123,540 p.)

Twoje menu wydaje się być dość rozwlekłe. Z reguły menu buduje się na podstawie listy. Jeżeli elementy menu nie są do siebie przyklejone to wystarczy dać im inline-block; I to wszystko. Wysokość kontenera dostosuje się do swojej zawartości. W przypadku float:left; wyjmujesz elementy z obiegu i nie zajmują one swojego poprzedniego miejsca więc pojemnik nie ma wysokości dlatego należy jeszcze użyć clear: both; lub nadać mu wysokość na sztywno, ale  to powoduje, że przy zmianie rozdzielczości zostaje puste miejsce jeżeli zawartość jest zmniejszana.

<div class="menu">
  <ul>
    <li><a href="#">O mnie</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Oferta</a></li>
    <li><a href="#">Cennik</a></li>
    <li><a href="#">Kalendarz</a></li>
    <li><a href="#">Galeria</a></li>
  </ul>
</div>
body{
  background-color: #000;
}

.menu{
  width: 60%;
  height: auto;
  margin: 0 auto;
  background-color: lightblue;
  padding: 10px 0;
}
.menu ul{
  width: 100%;
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu ul li{
  display: inline-block;
  width: 30%;
  margin: 10px;
  height: 50px;
}
.menu ul li a{
  display: block;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  color: white;
  background-color: blue;
  border-radius: 5px;
}

 

+1 głos
odpowiedź 8 stycznia 2018 przez Mikołaj Kawczynski Dyskutant (9,160 p.)
Dajesz wszystko w jeden div. Kontenerowi nadrzędnemu dajesz position: relative. Divowi dajesz top, bottom, left i right na 0.
komentarz 15 stycznia 2018 przez ziomek7 Obywatel (1,060 p.)
w jaki sposób to zrobić?
1
komentarz 15 stycznia 2018 przez Mikołaj Kawczynski Dyskutant (9,160 p.)
Musisz zdefiniować wielkość tego diva. Nie możesz tego zrobić np. z width: auto. Reszta dokładnie tak jak napisałem.
0 głosów
odpowiedź 7 stycznia 2018 przez PaulGilbert Gaduła (3,280 p.)
A czemu niby miałbyś to w pionie ustawiać? Różne komputery mają różną rozdzielczość i w związku z tym o ile ustawienie w poziomie ma raczej istotne znaczenie, o tyle w pionie już nie koniecznie, bo i tak jak ktoś ma węższy monitor, to mu się musi zmieścić treść, więc i divy czasami będą wówczas dłuższe automatycznie.
komentarz 15 stycznia 2018 przez ziomek7 Obywatel (1,060 p.)
jest z tym problem bo np. na telefonie iphone X jest duzo wolnego miejsca pod boxami

Podobne pytania

0 głosów
1 odpowiedź 588 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)
0 głosów
2 odpowiedzi 1,779 wizyt
+1 głos
3 odpowiedzi 1,575 wizyt
pytanie zadane 15 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

93,164 zapytań

142,176 odpowiedzi

321,937 komentarzy

62,492 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 688p. - dia-Chann
  2. 676p. - CC PL
  3. 675p. - Łukasz Piwowar
  4. 664p. - Marcin Putra
  5. 662p. - Łukasz Eckert
  6. 649p. - Michal Drewniak
  7. 641p. - rafalszastok
  8. 641p. - rucin93
  9. 629p. - Piotr Aleksandrowicz
  10. 621p. - Dawid128
  11. 602p. - Michał Telesz
  12. 597p. - Hubert Chęciński
  13. 572p. - ssynowiec
  14. 500p. - TheLukaszNs
  15. 437p. - nidomika
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 polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...