CSS in five ways to achieve the navigation menu Horizontal Center example of the detailed

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.

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 p to surround this navigation menu.

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

CSS code:

Add "text-align:center" to the outer p, 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 to use the "position:relative" positioning method to get the elements horizontally centered, I do not recommend this method, because the code more than a p to wrap, of course, these are used according to the situation.

HTML code:

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

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

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

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:

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

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

Method 5:width:fit-content

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

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

Written in the last: Method 1:display:inline-block simple and understandable.