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边距：

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

Answer 2

让我们试着记住一个＆＃34; div＆＃34;元素是。它是HTML文档的一个分区或一大块。当我写网站时，我承认，我疯了，确保所有内容都被组织成尽可能多的块。

http://jsfiddle.net/1ph1wvp8/1/

<div class="container">
<div class="promotion-left">&nbsp;</div>
<div class="promotion-right">
    <div class="Promotion Head">
         <h2 class="instructions-head">INSTRUCTIONS</h2>

    </div>
    <div class="PromotionL ist">
        <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>
    </div>
    <div class="Promotion Download"> <a href="#" class="promotion-btn">Download</a>

    </div>
</div>
</div>

注意，我在促销的每个部分都添加了div。然后我更新了css如下：

.promotion-left {
background: white;
float:left;
width: 15%;
}
.promotion-right {
background: #eaf8fe;
float:left;
width: 80%;
}
a.promotion-btn {
background: red;
text-decoration: none;
border-radius: 2px;
padding: 8px 16px;
margin:auto;
}
.Download {
text-align:center;
}
.Promotion {
width:30%;
}

我将促销类的宽度设置为30％，以便将按钮保持在列表下方，否则它会以背景为中心，对我来说看起来很时髦（删除30％以便自己查看）。

居中文本链接按钮

2 个答案: