how to align text center and right

Question

Hi All,

I m 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 correct way or their any other to handle this scenario

Thanks

Answer 1

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>

Answer 2

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>

Answer 3

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.