forethought forethought - 17 days ago 5
CSS Question

Why setting text-align to right for the anchor tag, moves the span tag which is inside anchor tag, moves out of the anchor tag

I have a problem understanding why setting text-align property to right value, moves the span tag out of the anchor tag area (overflow)?

The structure of the HTML document



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>





I cannot even properly center the span tag. I do not understand why?

Answer

Solution
You have to remove the position: absolute to the span, and add a text-align: center to the <a>.

If you want to keep position: absolute, just put left: 100px to the <span>.

Explanation
If you put position:abolute, to centered it, you have to get in mind the parent's width. If not, the <span>is positioning just right to it. By other way, you have to text-align:centerto <a>because you want that the content inside it, to be centered.