html - 祖 parent 中心对齐 flex div 内的中心按钮

Question

标题听起来很困惑，但很难表达!

如何在 .feature-inner div 中居中对齐 a？每当我使用通常的 margin: 0 auto; display: block; 它只是将链接拉伸(stretch)到 div 的整个宽度。

这是我的 HTML:

#feature {
  height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top,
.bottom {
  text-align: center;
  font-size: 30px;
  font-family: $titlefont;
  font-size: 4rem;
  line-height: 6rem;
  letter-spacing: 2px;
}

.top {
  font-weight: 500;
}

.bottom {
  font-weight: 100;
}

a {
  background-color: $brandGreen;
  padding: 15px 50px;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: $font;
  text-shadow: 0px 1px 1px #717171;
}

<div id="feature">
  <div class="container">
    <div class="feature-inner">
      <h1 class="top">My Title</h1>
      <h1 class="bottom">My Sub title</h1>
      <a href="">My button</a>
    </div>
  </div>
</div>

Answer 1

尝试:

#feature {
  height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top,
.bottom {
  text-align: center;
  font-size: 30px;
  font-family: $titlefont;
  font-size: 4rem;
  line-height: 6rem;
  letter-spacing: 2px;
}

.top {
  font-weight: 500;
}

.bottom {
  font-weight: 100;
}

a {
  display: block;
  text-align: center; //center the button text vertically
  width: 100px; //set the width of button
  height: 30px; //set the height of button
  line-height: 30px; //when set same as height makes the button text centered horizontally
  margin: 0 auto; //center the whole button
  background-color: $brandGreen;
  padding: 0;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: $font;
  text-shadow: 0px 1px 1px #717171;
}

<div id="feature">
  <div class="container">
    <div class="feature-inner">
      <h1 class="top">My Title</h1>
      <h1 class="bottom">My Sub title</h1>
      <a href="">My button</a>
    </div>
  </div>
</div>

https://jsbin.com/zehogubaja/2/edit?html,css,output