Wyśrodkowanie menu stworzonego w <div class"">

pytanie zadane 2 kwietnia 2016 w HTML i CSS przez ArturToJa Nowicjusz (180 p.)
zamknięte 2 kwietnia 2016 przez Arkadiusz Waluk

Witam. Mój problem polega na tym iż stworzyłem diva id o nazwie menu w którym umieściłem kilka divóv class o nazwie option. Opcje które stworzyłem są przyklejone do lewej, a ja chciałbym aby były wyśrodkowane. Próbowałem najprostszych sposobów z text-align oraz margin-left: auto !important; etc. Pozdrawiam :)

HTML:

<!DOCTYPE html>
<html lang="pl">

<head>

    <title></title>
    <meta charset="utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

</head>

<body>
    <div id="box">
        <div id="menu">
            <div class="option">Strona Główna</div>
            <div class="option">O firmie</div>
            <div class="option">Tabor</div>
            <div class="option">Rekrutacja</div>
            <div class="option">Kontakt</div>
            <div class="option">Forum</div>
            <div style="clear: both;"></div>
        </div>
    </div>
</body>

</html>

CSS:

body
{
    background-color: #333333;
    font-family: 'Lato', sans-serif;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
}
#box
{
    width: 100%;
}
#menu
{
    background-color: #ff7437;
    color: #e2e2e2;
    min-height: 46px;
    border-bottom: 4px solid #ca5c2c;
}
.option
{
    float: left;
    padding: 10px;
    font-size: 20px;
}

komentarz zamknięcia: Rozwiązane: "wszystko działa jak należy. Dziękuję wszystkim za pomoc"

4 odpowiedzi

odpowiedź 2 kwietnia 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

W chwili obecnej menu robi się na liście ul z usuniętym wypunktowaniem. Pozycje menu to są elementy li, którym ustawia się display inline-block. I po takim ułożeniu można bez problemu użyć zwykłego text-align: center i menu zostanie wyśrodkowane. Nie mam w zwyczaju nigdy dawania gotowców, ale że mam już takie coś zrobione i wyżej i tak opisałem wszystko po kolei jak to wykonać to proszę, zobacz tutaj: http://codepen.io/awaluk/pen/QNvayg

Jeśli chcesz, aby koniecznie działało to co zrobiłeś to musisz kombinować z ustaleniem szerokości całego menu na stałe i nadaniu im lewego i prawego marginesu automatycznego - wtedy się wyśrodkuje, tylko jak mówię nie dla pojedynczych pozycji menu, a dla wszystkich razem.

PS. Kod wstawiamy używając bloczku code i wybieramy odpowiednią kategorię, zwróć proszę na to następnym razem uwagę → http://forum.pasja-informatyki.pl/faq

odpowiedź 2 kwietnia 2016 przez niezalogowany

Trochę poprawiłem: http://codepen.io/Argeento/pen/ONxOxw

Nie stosuj nigdy !imporant

Poczytaj trochę o semantyce html5.

komentarz 2 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

http://tutorials.comandeer.pl/html5-blog.html

odpowiedź 2 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

Musisz podać width, a potem margin: 0 auto;

        <div id="menu"> 
            <div class="option">Strona Główna</div> 
            <div class="option">O firmie</div> 
            <div class="option">Tabor</div> 
            <div class="option">Rekrutacja</div> 
            <div class="option">Kontakt</div> 
            <div class="option">Forum</div> 
            <div style="clear: both;"></div> 
        </div>

Nie rób tak... Zrób to jako listę. I daj to w tagu <nav>.

<nav>
    <ul>
        <li><a href="#">Strona Główna</a></li>
        <li><a href="#">O firmie</a></li>
        <li><a href="#">Tabor</a></li>
        <li><a href="#">Rekrutacja</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Forum</a></li>
    </ul>
</nav>

I usuń: