Multiple ways to center CSS navigation menus horizontally

In the web design, the horizontal navigation menu is very extensive, in CSS style, we usually use the float element or "display:inline-block" to solve. And today we're going to focus on how to center elements of unknown width, and here are a few ways to solve the horizontal centering problem. Of course, these methods are not necessarily used to solve the navigation menu problems, and other similar situations are also available.

Online Demo: Demo

CSS navigation menus are horizontally centered in several ways:

• Method 1:display:inline-block
• Method 2:position:relative
• Method 3:display:table
• Method 4:display:inline-flex
• Method 5:width:fit-content/width:intrinsic

Method 1:display:inline-block

This method is relatively simple, is to convert the container into "display:inline-block" block-level elements, and then you can directly use the "text-align:center" to achieve the horizontal center effect.

HTML code:

Here we need a div to surround this navigation menu.

<div class= "NavBar" >    <ul>        <li><a href= "/" > Home </a></li> ...    </ul></div>

CSS code:

Add "text-align:center" to the outer Div, then set the menu container to "display:inline-block" inline block-level elements, and the menu floats to the left "float:left"

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

Browser compatibility can only be IE8 or later, so if you want to be compatible with IE7, please add the following code

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

Method 2:position:relative

This is using the "position:relative" positioning method to get the elements horizontally centered, I'm not recommending this method because the code has a div to wrap around, of course, which is used according to the situation.

HTML code:

<div class= "NavBar" >    <div>        <ul>            <li><a href= "/" > Home </a></li > ...        </ul>    </div></div>

CSS code:
It's interesting to set the positioning div to float, reposition "left:50%", and navigate to "left:-50%". May express not very clear, see the code yourself ^ ^

. navbar {    Overflow:hidden;}. NavBar > div {    position:relative;    left:50%;    Float:left;}. NavBar ul {    position:relative;    left:-50%;    Float:left;}. NavBar li {    float:left;}. NavBar Li + li {    margin-left:20px;}

If you want to be compatible with IE7, add the following styles:

. navbar {    position:relative;}

Method 3:display:table

If you like concise code, this method is perfect for you.

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;}

Browser Compatible: This method of code is streamlined, but IE7 and the following versions are not supported ...

Method 4:display:inline-flex

Knowledge of flex layout check it out for yourself. >_<

HTML code:

<div class= "NavBar" >    <ul>        <li><a href= "/" >Home</a></li>        ...    </ul></div>

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;}

Browser compatible: IE7 and the following versions of IE browser are not supported.

Method 5:width:fit-content

HTML code:

<div class= "NavBar" >    <ul>        <li><a href= "/" > Home </a></li> ...    </ul></div>

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;}

Browser compatible: This is a relatively low-compatibility, only support Firefox or Chrome, Opera 12 these newer browsers.

Online Demo: demo→

Written in the last

Introduced so many methods, each method has different good or bad, these depending on the situation of the project, for me, "display:inline-block" is more suitable for the popularization, because it compatibility is better!

Multiple ways to center CSS navigation menus horizontally