Detailed examples of five methods in CSS to achieve horizontal centering of navigation menus

In web design, horizontal navigation menus are widely used. In CSS styles, we usually use Float elements or "display:inline-block" to solve it. Today we will mainly explain how to center elements of unknown width. Below we will list several methods to solve the horizontal centering problem. Of course, these methods are not necessarily used to solve navigation menu problems, and can also be used in other similar situations.

Multiple methods for horizontally centering CSS navigation menus:

• 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, it is to convert the container Convert it to "display:inline-block" inline block-level element, and then directly use "text-align:center" to achieve the horizontal centering effect.

HTML code:

Here we need a p to surround the navigation menu.

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

CSS code:

Add "text-align:center" to the outer p, and then set the menu container to "display:inline-block" inline block Level element, menu floating left "float:left"

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

The browser here is only compatible with IE8 or higher, 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 center the element horizontally. I don't recommend this method very much because the code has an extra p to wrap it. Of course, these are based on the situation. in use.

HTML code:

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

CSS code:
Set the positioning p to floating, and then position "left:50%", Then navigate to "left:-50%". This method is very interesting. Maybe the expression is not very clear, just read 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, please add the following style:

.navbar {
    position:relative;
}

Method 3: display:table

If you If you like concise code, then 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 compatibility: This method The code is streamlined, but it does not support IE7 and below...

Method 4: display:inline-flex

Check up the knowledge about flex layout 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 compatibility: Does not support IE7 and below Internet Explorer.

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

Browser compatibility: This compatibility is relatively low and only supports newer browsers such as Firefox, chrome, and Opera 12.

Written at the end: Method 1: display:inline-block is simple and easy to understand.

The above is the detailed content of Detailed examples of five methods in CSS to achieve horizontal centering of navigation menus. For more information, please follow other related articles on the PHP Chinese website!