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

你可以使用＆＃34; flexbox＆＃34;为此

＆＃13;

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

＆＃13;

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

＆＃13;

没有flexbox

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

更新检查新小提琴

https://jsfiddle.net/bimbonkens/fa7s3ypj/

你只需要

display:block

在你的按钮上。

你的css语法对于vanilla css（没有预处理器）也是错误的

header {
  .btn {}
}

应该是这个

header {    }
.btn {    }

如果您需要上下文：

header {}
header .btn {}

您需要使用

margin: 0 auto;

表示块元素，因为

text-align:center;

仅适用于内联和内联块

Answer 3

你想要这样的东西： -

10m

no-cache

Answer 4

可以采用以下方法：

＆＃13;

header {
  text-align: center;
}
  header .btn {
    border-radius: 7px;
    padding: 5px 10px;
    border: none;
    display: block;
    width: 100px;
    margin: auto;
  }

  .btn-green {
    color: #fff;
    background-color: #7CAE9E;
    margin: 20px;
  }
  .btn-grey {
    color: #333;
    background-color: grey;
    margin: 20px;
  }

＆＃13;

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

＆＃13;

文本对齐中心按钮

4 个答案: