css - 居中文本链接按钮

Question

我试图让一个文本链接居中，但是，它没有响应 text-align: center;

有什么想法吗？我知道我想多了..

HTML:

    <div class="container">
    <div class="promotion-left">&nbsp;
    </div>
    <div class="promotion-right">
      <h2 class="instructions-head">INSTRUCTIONS</h2>
      <ol class="instructions-list">
        <li class="instructions-item">INSTRUCTIONS 1</li>
        <li class="instructions-item">INSTRUCTIONS 2</li>
        <li class="instructions-item">INSTRUCTIONS 3</li>
      </ol>
      <a href="#" class="promotion-btn">Download</a>
    </div>
  </div>

CSS:

.promotion-left {
  background: white;
  display: inline-block;
  width: 15%;
}
.promotion-right {
  background: #eaf8fe;
  display: inline-block;
  width: 80%;
}   
a.promotion-btn {
  background: red;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  padding: 8px 16px;
}

JSFIDDLE

Answer 1

一种选择是使 a 成为具有固定宽度和 auto 边距的 block 元素:

a.promotion-btn {
  /* other styles */
  display: block;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

另一种方法是将 a 放在带有 text-align: center 的 div 中:

<div class="center">
  <a href="#" class="promotion-btn">Download</a>
</div>

和

.center {
  text-align: center;
}