为什么设置文本对齐，以正确的定位标记，移动跨度标签，它是锚定标记，移出锚标记

Question

的我理解为什么设置文本对齐属性权值的问题，将span标签移出锚标签区域（溢出）？

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>

我甚至不能正确居中的跨度标签的结构。我不懂为什么？

Answer 1

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

如果你想保留position: absolute，只需把left: 100px加到<span>即可。

说明
如果你把position:abolute，以它为中心，你心里有得到父母的宽度。如果不是这样，<span>正好适合它。 通过其他方式，您必须text-align:center至<a>，因为您希望它内部的内容以居中为中心。