HTML如何使水平欄標簽居中？

Question

我在這里有一個單杠。 我在想。 如何在酒吧中心制作標簽。 而不是在左邊。 有人可以告訴我該怎么做嗎？ 還為我附上一段代碼嗎？

我的代碼：

 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; 在UL元素上，然后display: inline-block; 在您的LI元素上（而不是浮動）

 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

將float:left更改為display:inline-block並將text-align:center賦予ul類。

 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> 

添加display：flex和justify-content：UI元素的中心應該做到這一點

Answer 4

添加text-align：center; ul和change display：inline-block; 李的

 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

選中此Ans可能對您有幫助。 現在文本是中心；

 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

您可以將UL元素（或您可能擁有的任何包裝器）上的margin-left和margin-right為auto。

margin-auto適用於寬度小於頁面寬度的元素，在這種情況下， ul占用了整個寬度，因此沒有任何要居中的地方， text-align: center ul text-align: center和display: inline-block是在這種情況下的解決方案。

 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>