How to align the center of the text and the right

Question

I ran into a problem when aligning two texts, one in the center and another text on the right.

I used the div to align:

<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 title is omitted on the left, it is not centered correctly, please let me know that this is the right way or is there any other way to handle this scenario.

thanks

Answer 1

If you want the element not to work with the layout, try the absolute value:

 <div id="header" style="position:relative;text-align:center;"><!-- define relative so child absolute 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 2

You do not need to use a div for this, you can style the elements themselves. <a> does not understand text-align by default, since it is an inline element, so I put the link in a paragraph that accepts text alignment. I put two lines in a <div> with a small width, so it's easy to see what happens.

 <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 3

This works great for me. But if you have problems positioning h1 , try making a block: h1 { display: block; } h1 { display: block; } . On the other hand, if you want to display h1 and a on the same line, you just need to set the right alignment of a to h1 .