CODEWITHSUNDEEP
htmlcss
Mayur
Mayur

Reputation: 3015

how to align text center and right

I am facing problem while aligning two text, one in center and other text in right.

I used a Div to align it:

<div style="text-align:center">
  <h1> Sample Heading</h1>

    <div style="float:right; text-align:center">

         <a href="#">sample link</a> 

    </div>
</div>

When I used this my heading comes left, its not a centrally align properly please tell is this the correct way or is there any other way to handle this scenario.

Thanks

Upvotes: 9

Views: 77801

Answers (4)

Fattie
Fattie

Reputation: 12296

For anyone using pug

To quickly align a link to the right, this seems to work:

html
    head
        style.
            rite {
                font-family: monospace;
                font-size: 10pt;
                text-align: right;
            }

and then ...

rite
    p
        a(href='/logout' align=right) logout

Note that this won't work:

rite a(href='/logout' align=right) logout

And this won't work:

rite
    a(href='/logout' align=right) logout

As @superUntitled explained. Great tip from @superUntitled.

Upvotes: 0

vtambourine
vtambourine

Reputation: 2149

It works fine to me. But if you have some issues with positioning of h1, try make it block: h1 { display: block; }. On other hand, if you want to display h1 and a at the same line, you just have to put right-aligned a before h1.

Upvotes: 0

Dan Heberden
Dan Heberden

Reputation: 11068

If you want the item to not mess with the layout, try absolute:

<div id="header" style="position:relative;text-align:center;"><!-- define relative so child absolute's are based on this elements origin -->
    <div id="sampleLink" style="position:absolute; top:0px; right:0px; >Link</div>
    <h1 style="text-align:center;">Heading</h1>
</div>

Upvotes: 2

superUntitled
superUntitled

Reputation: 22567

You do not need to use div's to do this, you can style the elements themselves. The < a > tag by default does not understand text-align, as it is an inline element, so I have placed the link in a paragraph, which accepts text-align. I have placed the two lines in a < div > tag with a small width so it is easy to see what is going on.

<div style="width:400px;">
  <h1 style="text-align:center"> Sample Heading</h1>
<p  style="text-align:right"><a href="#">sample link</a> </p>
</div>

Upvotes: 0

Related Questions