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

Question

我这里有一个单杠。我在想。如何在酒吧中心制作标签。而不是左边。有人可以告诉我该怎么做？还请为我提供一个片段吗？

我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

</body>
</html>

Answer 1

text-align: center;元素上的

UL，而不是display: inline-block;元素上的LI（而不是浮动）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将float:left更改为display:inline-block并将text-align:center更改为ul类。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

添加display：flex和justify-content：center到UI元素应该这样做

Answer 4

添加 text-align：center; of ul 并更改 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

检查此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设置为自动。

margin-auto适用于宽度小于页面宽度的元素，在这种情况下，ul占据整个宽度，因此无需居中，text-align: center在这种情况下，ul和display: inline-block是解决方案。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;