• 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
295 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,460 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,460 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ź 579 wizyt
pytanie zadane 30 marca 2019 w HTML i CSS przez JakuBB Nowicjusz (220 p.)
0 głosów
2 odpowiedzi 1,758 wizyt
+1 głos
3 odpowiedzi 1,540 wizyt
pytanie zadane 15 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

93,089 zapytań

142,047 odpowiedzi

321,473 komentarzy

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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...