html - 文本对齐中心按钮

Question

我需要将按钮居中放置在页面中间，一个在另一个下面。

我使用了下面的代码，但结果是按钮仍然彼此相邻出现。

header {
  text-align: center;
  .btn {
    @include Myriad-Pro-Light;
    border-radius: 7px;
    padding: 5px 10px;
    border: none;
  }
  .btn-green {
    color: #fff;
    background: #7CAE9E;
    margin: 20px;
  }
  .btn-grey {
    color: #333;
    background: $grey;
    margin: 20px;
  }
}

<header>
  <a href="#" class="btn btn-default btn-green" role="button">Button A</a>
  <a href="#" class="btn btn-default btn-grey" role="button">Button B</a>
</header>

谢谢

Answer 1

你可以为此使用“flexbox”

header {
  display: flex;
  flex-direction: column;
  align-items: center;
    .btn {
        @include Myriad-Pro-Light;
        border-radius: 7px;
        padding: 5px 10px;
        border: none;
    }

    .btn-green {
        color: #fff;
        background: #7CAE9E;
        margin: 20px;
    }

    .btn-grey {
        color: #333;
        background: $grey;
        margin: 20px;
    }
}

<header>
        <a href="#" class="btn btn-default btn-green" role="button">a</a>
        <a href="#" class="btn btn-default btn-grey" role="button">b</a>
    </header>

没有 flexbox

.btn {
  @include Myriad-Pro-Light;
  border-radius: 7px;
  padding: 5px 10px;
  border: none;
  float: left;
  clear: both;
  width: calc(100% - 40px);
  box-sizing: border-box;
  text-align: center;
}
.btn-green {
  color: #fff;
  background: #7CAE9E;
  margin: 20px;
}
.btn-grey {
  color: #333;
  background: $grey;
  margin: 20px;
}

<header>
  <a href="#" class="btn btn-default btn-green" role="button">a</a>
  <a href="#" class="btn btn-default btn-grey" role="button">b</a>
</header>