html - 为什么将 anchor 标签的text-align设置为右对齐，移动 anchor 标签内的span标签，移出 anchor 标签

Question

我无法理解为什么将 text-align 属性设置为 right 值，将 span 标签移出 anchor 标签区域(溢出)？

HTML文件的结构

a.btn{
  border: 1px solid #00A0D6;
  border-radius: 30px;
  background-color: #00A0D6;
  text-decoration: none;
  color: white;
  text-align: right;
  width: 250px;
  height: 20px;
  position: relative;

  display: inline-block;
  margin: auto;
}

.container{
  margin: 90px;
}

.top-content{
  position: absolute;
  text-align: center;
}

.bottom-content{
  position: absolute;
  top: 100px;
}

<a href="#" class="btn">
  <span class="top-content">Buy now</span>
  <span class="bottom-content">Sale for $40</span>
</a>

我什至无法正确居中 span 标签。我不明白为什么？

Answer 1

解决方案
您必须删除 position: absolute到跨度，并添加一个 text-align: center到 <a> .

如果你想保留position: absolute , 只需输入 left: 100px到 <span> .

解释
如果你把 position:abolute ，要使其居中，您必须记住父级的宽度。如果没有，<span>定位恰到好处。换句话说，你必须 text-align:center至 <a>因为您希望其中的内容居中。