Mehrere Divs neben einander zentrieren

TheWalkingJoke · 2. Juli 2016

Hallo zusammen,
ich bin gerade dabei einen Header zu machen, in dem ein Navigator integriert ist.
Ich habe einen Header, der seine Breite automatisch anpasst.
In dem Header soll oben eine Überschrift sein und dann darunter ein Navigator. Der Navigator besteht aus mehreren Divs und diese sollen nebeneinander Zentral im Header sein.

Folgender Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Test Site</title>

    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="main">

        <div id="header">
            <div class="name">&Uuml;berschrift</div>
                <div id="navi">
                    <div class="navi">Test 1</div>
                    <div class="navi">Test 2</div>
                    <div class="navi">Test 3</div>
                    <div class="navi">Test 4</div>
                </div>
            </div>
        <div id="inhalt">

        </div>
        <div id="footer">

        </div>

    </div>
</body>
</html>

Code:

body
{
    background-color: #F1F1F1;
}

#main
{

}

#header
{
    width: auto;
    height: 200px;
    border-color: #FFFFFF;
    border-style: groove;
    border-width: thin;
    background-color: #FBFBFB;
    margin-top: 20px;
    margin-left: 150px;
    margin-right: 150px;
    margin-bottom: 20px;
    }

.name
{
    font-size: 80px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: auto;
}

#navi
{
    margin: 0 auto;
    width: auto;

}
.navi
{
    float: left;
    font-size: 30px;
}

Ich weiß nicht, wie ich den Navigator zentrieren kann.

TheWalkingJoke

hroessler · 2. Juli 2016

Hallo, ein div ist ein sogenanntes Blockelement und nimmt von Haus aus die ganze Breite seines Parents in Beschlag. Daher sind deine divs auch untereinander.

Das ist auch der Grund, warum man Blockelemente nicht ineinander Schachteln sollte. Verwende besser <span> (das gleiche wie <div>, nur kein Blockelement), dann stehen diese nebeneinander.

greetz
hroessler

FranzvonAssisi · 2. Juli 2016

Das geht mit dem "neuen" CSS sehr einfach: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox ist eine sehr mächtige "Stylegruppe". Ein Zentrieren sähe damit so aus:

Code:

display: flex;
justify-content: center;

Das kommt dann in den Container (hier: #navi)

Das margin Auto lässt du weg und width auch, bleibt 100%.

Lg, Franz

TheWalkingJoke · 2. Juli 2016

FranzvonAssisi schrieb:
Das geht mit dem "neuen" CSS sehr einfach: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox ist eine sehr mächtige "Stylegruppe". Ein Zentrieren sähe damit so aus:

Code:

display: flex; justify-content: center;

Das kommt dann in den Container (hier: #navi)

Das margin Auto lässt du weg und width auch, bleibt 100%.

Lg, Franz

Funktioniert. Vielen Dank

Suche

Mehrere Divs neben einander zentrieren

TheWalkingJoke

Lt. Junior Grade

hroessler

Gast

FranzvonAssisi

Admiral

TheWalkingJoke

Lt. Junior Grade

Ähnliche Themen