CODEWITHSUNDEEP
css
jonesjones
jonesjones

Reputation: 497

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

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>&nbsp;<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

Upvotes: 0

Views: 196

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105963

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>

Upvotes: 1

KK578
KK578

Reputation: 1

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.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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>

Upvotes: 2

Related Questions