HTML CSS中心按钮[重复]答案

【问题标题】：HTML CSS center buttons [duplicate]HTML CSS中心按钮[重复]
【发布时间】：2018-04-07 20:39:21
【问题描述】：

我的页面上的按钮无法居中。

HTML 代码

.banner {
  background-color: #101723;
  width: 100%;
  padding: 50px 0;
}

.button {
  display: inline-block;
  width: 20%;
  margin: auto;
  padding: 16px 0;
  text-transform: uppercase;
  vertical-align: middle;
  border: 3px solid #FFFFFF;
  color: #FFFFFF;	
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}

<section class="banner">
  <a href="" target="_blank"><div class="button">BUTTON 1</div></a> 
  <a href="" target="_blank"><div class="button">BUTTON 2</div></a>
  <a href="" target="_blank"><div class="button">BUTTON 3</div></a>
</section>

这 3 个按钮应在容器中居中。我尝试了所有方法，但似乎我错过了一些东西。

【问题讨论】：

你试过在.banner上声明text-align: center吗？居中指南：jsfiddle.net/o4dzsc0k/1 & jsfiddle.net/o4dzsc0k/2
@DavidHope 为了清楚起见，这仅适用于 块元素 并且已被弃用 - 只是提醒一下。它仍然可以工作。 参考： developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/…
你只需要添加 text-align:center css 到你的 .banner 类

标签： html css

【解决方案1】：

只需将 text-align: center 添加到您的 .banner 类中：

.banner {
    background-color: #101723;
    width: 100%;
    padding: 50px 0;
    text-align:center;
}

.button {
    display: inline-block;
    width: 20%;
    margin: auto;
    padding: 16px 0;
    text-transform: uppercase;
    vertical-align: middle;

    border: 3px solid #FFFFFF;
    color: #FFFFFF; 
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
}

<section class="banner">
  <a href="" target="_blank"><div class="button">BUTTON 1</div></a> 
  <a href="" target="_blank"><div class="button">BUTTON 2</div></a>
  <a href="" target="_blank"><div class="button">BUTTON 3</div></a>
</section>

【讨论】：

【解决方案2】：

CSS 中的居中一直很难实现。我发现了我认为最好的 flexbox 方法。

.container {
     display: flex;
     flex-direction: column;
     align-items: center; /* To center vertically */
     justify-content: center; /* To center horizontally */
}
.item {
}

您可以在这里找到所需的一切：https://www.w3schools.com/css/css3_flexbox.asp

【讨论】：