How to center the horizontal navigation bar page

To achieve the effect of the picture, the horizontal navigation bar page is centered.

write picture description here
At the beginning, the method I used was to set the width and height and CSS properties margin:0 auto;for the ul, and the li under the ul floated to the left. The simplified code of the style is as follows:

<!DOCTYPE html>
<html>
<head>
<title> 横向导航条页面居中的方法</title>
<style>
a{
    text-decoration: none;
    color: #000000;
}
ul{
    display: block;
    width: 436px;
    height: 88px;
    margin: 0 auto;
    padding: 0;
}
li{
    list-style: none;
    display: block;
    float: left;
    margin-right: 21px;
}
li:last-child{
    margin: 0;
}
</style>
</head>
<body>
<ul>
    <li><a href="###">产品中心</a></li>
    <li><a href="###">仿古系列</a></li>
    <li><a href="###">木纹砖系列</a></li>
    <li><a href="###">仿古系列</a></li>
    <li><a href="###">木纹砖系列</a></li>
</ul>
</body>
</html>

This can indeed have the effect of centering the horizontal navigation bar page, but it is often difficult to determine the width of the horizontal navigation bar, so this method has certain limitations.

The method described next does not have the above limitations and is therefore recommended.
This method is to combine the CSS properties of li with the CSS properties display:inline-block;of ul text-align:center;, so that the ul can also achieve the effect of centering the page without setting the width and margin: 0 auto; The simplified code of the style is as follows:

<!DOCTYPE html>
<html>
<head>
<title> 横向导航条页面居中的方法</title>
<style>
a{
    text-decoration: none;
    color: #000000;
}
ul{
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
    display: inline-block;
    margin-right: 21px;
}
li:last-child{
    margin: 0;
}
</style>
</head>
<body>
<ul>
    <li><a href="####">产品中心</a></li>
    <li><a href="####">仿古系列</a></li>
    <li><a href="####">木纹砖系列</a></li>
    <li><a href="####">仿古系列</a></li>
    <li><a href="####">木纹砖系列</a></li>
</ul>
</body>
</html>

Note: text-align works on text, inline elements, and images, not block-level elements.

Therefore, text-align:center; in the ulCSS property will not act on the ul, but on the li under the ul to center the li page.

Note: The code contained in this article does not consider compatibility issues under IE.

How to center the horizontal navigation bar page

To achieve the effect of the picture, the horizontal navigation bar page is centered.

Guess you like