Wyśrodkowanie boxów w pionie

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

odpowiedź 7 stycznia 2018 przez pablop76 VIP (123,580 p.)

Środkowanie w pionie i poziomie w CSS 3

komentarz 15 stycznia 2018 przez ziomek7 Obywatel (1,060 p.)

zaznajomiłem się z lekturą, próbowałem zastosować, ale nadal nwm jak

komentarz 15 stycznia 2018 przez pablop76 VIP (123,580 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;
}

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.

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.