爲什麼設置文本對齊，以正確的定位標記，移動跨度標籤，它是錨定標記，移出錨標記

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>，因爲您希望它內部的內容以居中爲中心。