How to left align a link, with a centered header, on the same row of html

Question

I would like to do:

<a href="/">Home</a>
<h1>A great page</h1>

Where the href is as far to the left as possible, the h1 is centered and they are both on the same level.

I have got as far as making the href:

<a href="/" style="display:block;float:left;">Home</a>

and the h1:

text-align: center;

However, when I do this, the h1 isn't centered on the page, it is centered in the blank space remaining on the page after the href has been rendered.

How can I get the h1 to center as if the href on the left were not there?

Many thanks for your help!

possible duplicate of [How to align 3 divs (left/center/right) inside another div?](http://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) — RedGreenCode, Nov 18 '14 at 18:07
There are a few questions that address this topic: http://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div, http://stackoverflow.com/questions/5011059/left-center-and-right-align-divs-on-bottom-of-same-line, http://stackoverflow.com/questions/13694062/css-left-center-right-align-text-on-same-line — RedGreenCode, Nov 18 '14 at 18:07

score 3 · Accepted Answer · answered Nov 18 '14 at 18:08

3

You can use absolute positioning on the link like this:

h1 {
    text-align:center;
}

a {
    position:absolute;
    left:0;
}

Here's a JSFiddle.

answered Nov 18 '14 at 18:08

user13286

Great! Thank you! For some reason, I also had to add z-index: 10 to my href css to make the link clickable, I think because of other things on my page, which I don't quite understand, but never mind.. – user384842 Nov 18 '14 at 18:23