Rozmieszczenie divów

Question

Cześć!

Aby nie tracić zarówno mojego, jak i waszego czasu przejdę do sedna.

Otóż mam div o nazwie menu, który przechowuje kolejne 5 divów. Problem jest taki, że wszystkie te divy są po lewej stronie ;P Chciałbym umieścić je na środku diva menu :D Coś w stylu text-align: center, tylko, że dla divów :D

Oto potrzebne wycinki kodu:

HTML:

<div id="menu">

    <div class="menu_box">1</div>
    <div class="menu_box">2</div>
    <div class="menu_box">3</div>
    <div class="menu_box">4</div>
    <div class="menu_box">5</div>

<div style="clear:both;"></div>

</div>

CSS:

#menu
{
    width: 100%;
    height: auto;
}
.menu_box
{
    float: left;
    text-align: center;
    padding: 10px 20px;
}

EDIT: Proszę tylko o jedno: nie podsyłajcie linków ;p Ta masa tekstu do przeczytania mnie przeraża ;D

Answer 1

Osobiście zrobiłbym to flexboxem, który fajnie nadaje się do tego typu rzeczy https://codepen.io/mitelak/pen/GvgdON
Można to też zrobić na przykład opakowując te .menu_box-y divem, który wypozycjonujemy absolutnie względem diva .menu.

Z takich dodatkowych rzeczy to powinno się stylować po classach nie po id dlatego zmieniłem z #menu na .menu, poza tym jeżeli to jakaś nawigacja po stronie to może warto zapoznać się ze znacznikiem <nav>, a te 1,2,3,4,5 pewnie można by było potraktować jako lista :D

Comments

IT'S ALIVE!

​

Answer 2

Menu powinno być na liście.

Można ustawić wyświetlanie liniowo-blokowe dla itemów menu(trzeba usunąc opływanie), a dla rodzica ustawić text-align na center. Jest jeszcze opcja z flexboxem.

Tworzenie pustego diva do czyszczenia jest niepoprawne, poczytaj o clear-fixach