CODEWITHSUNDEEP
htmlcss
Knownow
Knownow

Reputation: 385

Why is text-align:right not working in this case?

I am not sure if it's okay to post a site URL but I will try anyway. I am trying to get the phone number at the top of this site (https://maisons-keyho.com/) aligned to the right. I thought the text-align property on the block-level element (parent div) should do the trick but it isn't working.

enter image description here

The following simplified code however works

<div class="header header_component header_component--linktext la_compt_iem la_com_action--linktext  strong" style="text-align:right">
        <a rel="nofollow" class="component-target" href="tel:0450775238">
            <span class="component-target-text">Appelez-nous au 04 50 77 52 38</span>
        </a>
    </div>

Could anybody please help me understand why it's not working on the site ? and how do I align it to the right ? I don't have access to the HTML of the code and would need to do it using CSS only.

Upvotes: 0

Views: 160

Answers (1)

Rishav Sharma
Rishav Sharma

Reputation: 406

I tested it out. When you change width of parent div to 100% and align it to right. Then this property is working.

Reason: As far as I know, this property depends upon the width of the element on which this is applied to. When you make the width of parent div 100%, which means its width is equal to its parent element which in this case is the whole width of header.

Link element is inline by default.So, if you apply the property to the parent element it will work.

This might be confusing but if you have doubts please let me know.

Have a look at this image

Upvotes: 1

Related Questions