填充适用于按钮，居中不起作用

Posted 2023-03-29

【中文标题】填充适用于按钮，居中不起作用

【英文标题】：Padding works on button, centering doesn't

【发布时间】：2021-12-19 10:43:17

【问题描述】：

我已尝试使用text-align: center;、justify-content: center; 和align-items: center;，但此按钮的位置仍将保持不变。

如果我尝试使用填充，例如padding: 750px，它会起作用，并且按钮会移动到中心。

这是我的那个按钮的 html 代码：

<div class="container">
   <div class="btn">
      <span>Lorem Ipsum</span>
   </div>
 </div>

这是我的button.css 文件。

请问如何使我的按钮居中？谢谢！

【问题讨论】：

margin: auto 到 .btn 怎么样？

span 仅使用与内容匹配的空间，因此使文本居中无效，因为它在具有精确匹配大小的容器中居中。像@SatoTakeru 建议的那样使用margin: auto 应该可以工作

我刚才尝试在它上面做margin: auto;，它成功了！谢谢！

是的，@jkoestinger，我不是说margin: auto 到span，我是说.btn。

【参考方案1】：

我在这里用你的 CSS 做了一个测试，问题是宽度，我取出后文本在中心

            .container 
  text-align: center;
  justify-content: center;
  align-items: center;

        .btn 
  height: 100px;
  color: var(--white);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 23px;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  cursor: pointer;
  line-height: 90px;
 
  transition: all 0.3s;
  position: relative;