HTML如何使水平栏标签居中？

Question

I have a horizontal bar here. And I was wondering. How do I make tabs on the bar center. And not to the left. Could someone please tell me how to do this? Also include a snippet for me please?

My code:

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } body { background-color: pink; } 

 <ul> <li><a class="active" href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> </ul> 

</body>
</html>

Answer 1

text-align: center; on the UL element and than set display: inline-block; on your LI elements ( instead of floating)

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; text-align: center; /* add */ } li { /*float: left;*/ display: inline-block; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } 

 <ul> <li><a class="active" href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> </ul> 

Answer 2

Change float:left to display:inline-block and give text-align:center to ul class.

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; text-align:center; } li { display: inline-block; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } body { background-color: pink; } 

 <ul> <li><a class="active" href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> </ul> 

Answer 3

 ul { display: flex; justify-content: center; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } body { background-color: pink; } 

 <ul> <li><a class="active" href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> </ul> 

Adding display: flex and justify-content: center to the UI element should do it

Answer 4

add text-align:center; of ul and change display:inline-block; of li

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; text-align : center; background-color: #333; } li { display: inline-block; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } body { background-color: pink; } 

 <ul> <li><a class="active" href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> </ul> 

Answer 5

Check this Ans may be it is helpful to you. now text is center;

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; text-align:center; } li { float: none; display:inline-block; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } body { background-color: pink; } 

 <ul> <li><a class="active" href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> </ul> 

Answer 6

You could set margin-left and margin-right to auto on the UL element (or any wrapper you might have).

margin-auto works for elements with a width that is less than the page width, in this case the ul is taking the entire width so there is nothing to center, text-align: center for the ul and display: inline-block are the solution in this case.

 ul { list-style-type: none; padding: 0; overflow: hidden; background-color: #333; text-align: center; } li { display: inline-block; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } body { background-color: pink; } 

 <ul> <li><a class="active" href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> <li><a href="#text">text</a></li> </ul>