How to add text after an h1 but keep the h1 centered - css

Question

I have an H1, and a link that needs to go after it (actually an image link, but I'm using text in the example below to simplify the code)
What I would like is for the link to appear after the H1 on the same line, but for the H1 to remain centered in it's containing div.
Right now, the link displaces the header from center...
Here's what I have
<div id="container">
<h1>Hello World</h1> <a id="gear" href="/aaa">Long text so you can see the displacement</a>
</div>
#container {
width: 400px;
text-align: center;
background-color: pink;
}
#container h1 {
display: inline-block;
}
And a fiddle of the same thing: http://jsfiddle.net/7xzq60x4/
In pictures:
now:
****HEADER TEXTlink****
what I want:
******HEADER TEXTlink**
Thanks in advance

Answer 1

Is this what you want?
#container {
width: 400px;
text-align: center;
background-color: pink;
position: relative;
}
#container h1 {
display: inline-block;
}
#container span {
position: absolute;
right: -75px;
top: 65%;
}
<div id="container">
<h1>Hello World</h1><span><a id="gear" href="/aaa">Long text so you can see the displacement</a></span>
</div>
Fiddle: http://jsfiddle.net/7xzq60x4/2/
Something which you might like...
#container {
width: 400px;
text-align: center;
background-color: pink;
position: relative;
}
#container h1 {
display: inline-block;
}
#container span {
position: absolute;
right: 25px;
top: 35%;
}
<div id="container">
<h1>Hello World</h1><span><a id="gear" href="/aaa">Small Text</a></span>
</div>

Answer 2

you may use the flex property + a pseudo element : http://jsfiddle.net/7xzq60x4/8/
#container {
width: 400px;
text-align: center;
background-color: pink;
display:flex;
}
#container a {
text-align:left;
}
#container:before {
content:'';
}
#container h1 {
white-space:nowrap;/* if this is what you 'd like */
}
#container h1 , #container a, #container:before{
flex:1;
margin:auto;
}
<div id="container">
<h1>Hello World</h1> <a id="gear" href="/aaa">Long text so you can see the displacement</a>
</div>
or the table layout http://jsfiddle.net/7xzq60x4/9/
#container {
width: 400px;
text-align: center;
background-color: pink;
display:table;
table-layout:fixed;
}
#container a {
text-align:left;
}
#container:before {
content:'';
}
#container h1, #container a, #container:before {
display:table-cell;
vertical-align:middle;
}
<div id="container">
<h1>Hello World</h1> <a id="gear" href="/aaa">Long text so you can see the displacement</a>
</div>

Answer 3

If you're okay with using flexbox, this can be achieved quite easily. This will need a few prefixes for compliance with all browsers, and may not go back to support IE9.
#container {
/* Use flexbox. */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Tells flexbox to place all items on a single line. */
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
/* Lastly tells flexbox to ensure all items are aligned on the center. */
align-items: center;
width: 400px;
text-align: center;
background-color: pink;
}
<div id="container">
<h1>Hello World</h1>
<a id="gear" href="/aaa">Long text so you can see the displacement</a>
</div>
For more information, try this quick guide.