Detaillierte Beispiele für fünf Methoden in CSS, um eine horizontale Zentrierung von Navigationsmenüs zu erreichen

Im Webdesign werden häufig horizontale Navigationsmenüs verwendet. In CSS-Stilen verwenden wir normalerweise Float-Elemente oder „display:inline-block“, um dieses Problem zu lösen. Heute erklären wir hauptsächlich, wie Elemente unbekannter Breite zentriert werden. Nachfolgend werden verschiedene Methoden zur Lösung des horizontalen Zentrierungsproblems aufgeführt. Natürlich werden diese Methoden nicht unbedingt zur Lösung von Navigationsmenüproblemen verwendet, sondern können auch in anderen ähnlichen Situationen verwendet werden.

Mehrere Methoden zum horizontalen Zentrieren von CSS-Navigationsmenüs:

• Methode 1: display:inline-block

• Methode 2: position:relative

• Methode 3: display:table

• Methode 4: display:inline-flex

• Methode 5: width:fit-content / width:intrinsic

Methode 1: display:inline-block

Diese Methode ist relativ einfach Konvertieren Sie den Container. Konvertieren Sie ihn in ein Inline-Blockebenenelement „display:inline-block“ und verwenden Sie dann direkt „text-align:center“, um den horizontalen Zentrierungseffekt zu erzielen.

HTML-Code:

Hier benötigen wir ein p, um das Navigationsmenü zu umgeben.

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

CSS-Code:

Fügen Sie „text-align:center“ zum äußeren p hinzu und setzen Sie dann den Menücontainer auf „display:inline-block“. " Inline-Elemente auf Blockebene, Menü schwebend nach links „float:left“

.navbar {
    text-align:center;
}
.navbar ul {
    display:inline-block;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

Der Browser hier ist nur mit IE8 oder höher kompatibel. Wenn Sie also mit IE7 kompatibel sein möchten, fügen Sie bitte den folgenden Code hinzu

.navbar ul {
    display:inline;
    zoom:1;
}

Methode 2: position:relative

Dies ist die Verwendung der Positionierungsmethode „position:relative“, um das Element horizontal zu zentrieren, weil Der Code verfügt über ein zusätzliches p zum Umschließen. Diese werden natürlich je nach Situation verwendet.

HTML-Code:

<p class="navbar">
    <p>
        <ul>
            <li><a href="/">首页</a></li>
            …
        </ul>
    </p>
</p>

CSS-Code:
Stellen Sie die Positionierung p auf float ein und positionieren Sie dann „left:50“. %“ und navigieren Sie dann zu „left:-50%“. Diese Methode ist sehr interessant. Vielleicht ist der Ausdruck nicht ganz klar, lesen Sie einfach den Code selbst^^

.navbar {
    overflow:hidden;
}
.navbar > p {
    position:relative;
    left:50%;
    float:left;
}
.navbar ul {
    position:relative;
    left:-50%;
    float:left;
}
.navbar li {
    float:left;
}
.navbar li + li {
    margin-left:20px;
}

Wenn Sie mit IE7 kompatibel sein möchten, fügen Sie bitte den folgenden Stil hinzu:

.navbar {
    position:relative;
}

Methode 3 : display:table

Wenn Sie prägnanten Code mögen, dann ist diese Methode perfekt für Sie.

HTML-Code:

<ul class="navbar">
    <li><a href="/">Home</a></li>
    …
</ul>

CSS-Code:

.navbar {
    display:table;
    margin:0 auto;
}
.navbar li {
    display:table-cell;
}
.navbar li + li {
    padding-left:20px;
}

Browserkompatibilität: Diese Methode vereinfacht den Code, unterstützt aber nicht IE7 und niedriger...

Methode 4: display:inline-flex

Überprüfen Sie selbst Ihr Wissen über Flex-Layout>_<

HTML-Code:

<p class="navbar">
    <ul>
        <li><a href="/">Home</a></li>
        …
    </ul>
</p>

CSS-Code:

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

Browserkompatibilität: Tut Unterstützt keine IE-Browser von IE7 und niedriger.

Methode 5: width:fit-content

HTML-Code:

<p class="navbar">
    <ul>
        <li><a href="/">首页</a></li>
        …
    </ul>
</p>

CSS-Code:

.navbar {
    text-align:center;
}
.navbar > ul {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-ms-inline-flexbox;
    display:-webkit-inline-flex;
    display:inline-flex;
}
.navbar li + li {
    margin-left:20px;
}

Browserkompatibilität: Diese Kompatibilität ist relativ gering und unterstützt nur neuere Browser wie Firefox, Chrome und Opera 12.

Zum Schluss geschrieben: Methode 1: display:inline-block ist einfach und leicht zu verstehen.

Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele für fünf Methoden in CSS, um eine horizontale Zentrierung von Navigationsmenüs zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!