如何将按钮居中显示。

Question

刚开始学习CSS。我成功地将按钮对齐到左边。但是我想把它们放到中间。当我将float:left改为float:center时，按钮出现在中心，但按钮的大小取决于内部文本，我希望所有按钮的大小都与第一张图片相同且没有边距。 https://istack.dev59.com/gsaAO.webp https://istack.dev59.com/N8M2o.webp

.button{
    width: 80px;
    padding: 12px;
    float: center;
    font-family: arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: lightblue;  
 }

  <div id="List">
           
                    <a class="button">HTML</a>
                    <a class="button">CSS</a>
                    <a class="button">JavaScript</a>
                    <a class="button">C#</a>
                    <a class="button" href="Unity.html">Unity</a>
                
         </div>

- Rudheim

---

你能同时添加 html 吗？ - johannchopin

请同时添加HTML。 - damnitrahul

如果我理解正确的话，只需将 margin: 0 auto 添加到按钮包装元素即可。 - ROOT

没有 float: center。 - j08691

你也可以针对 #List 容器进行定位，并设置 text-align: center;。 - Andrew

Answer 1

float: center 不是有效样式：

我建议你学习 flexbox，因为你的问题可以简单地用它解决：

#List {
  display: flex;
  justify-content: center;
}

.button {
  width: 80px;
  padding: 12px;
  font-family: arial;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background: lightblue;
}

<div id="List">

  <a class="button">HTML</a>
  <a class="button">CSS</a>
  <a class="button">JavaScript</a>
  <a class="button">C#</a>
  <a class="button" href="Unity.html">Unity</a>

</div>

- Itay Ganor

Answer 2

除了在文本中对齐图像之外，不要使用float。

正确的解决方案是使用display: flex;和align-items: center;，如下所示：（还要记得在按钮上设置flex: 0;）

.list {
    display: flex;
    justify-content: center;
}

.button {
    width: 80px;
    padding: 12px;
    font-family: arial;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: lightblue;
    flex: 0; 
}

<div id="List" class="list">
  <a class="button">HTML</a>
  <a class="button">CSS</a>
  <a class="button">JavaScript</a>
  <a class="button">C#</a>
  <a class="button" href="Unity.html">Unity</a>
</div>

- Mat Sz

Answer 3

不要在按钮上使用浮动，而是在父容器上使用自动边距。 尽可能避免使用浮动，现代特性如Flexbox和Grid已经可用。

#list{
margin : 0 auto;
}

- damnitrahul