How to center a heading based on a certain word

Question

I am trying to create a header for my website, however I am trying to figure out the best to way align it.

The header is something along the lines of "Welcome to SHEP at the University of XXXX". However, I am trying to make the sentence be centered around the word "SHEP". In other words, I'm trying to make the "SHEP" portion of the sentence be dead-center on the page.

I've tried a few methods such as <h1>Welcome to <span> SHEP </span> at the University of XXX</h1> and setting the span to align center, however I can't quite get it working.

I'm looking to achieve the look as displayed in #1, not #2:

Answer 1

HTML:

<div class="container">
    <h1>
        <span>Welcome to</span>
        SHEP
        <span>at the University of XXX</span>
    </h1>
</div>

CSS:

.container {
   display: block;
   text-align: center;
}

h1 {
    position: relative;
    display: inline-block;
    text-align: center;
}

span {
    position: absolute;
    top: 0;
    white-space: nowrap;
}

span:nth-of-type(1) { right: 100%; }
span:nth-of-type(2) { left: 100%; }

See Fiddle

Answer 2

Use display:table for a wrapper div and then display:table-cell for the child elements. They'll take up the width of the wrapper evenly. So, your markup would be something like this:

HTML

<div id="nav-wrap">
  <div id="nav-left">
    <p>Welcome to</p>
  </div>
  <div id="nav-center">
    <p>SHEP</p>
  </div>
  <div id="nav-right">
    <p>at the University of XXX</p>
  </div>
</div>

CSS

#nav-wrap {
  display:table;
  width:100%;
}
#nav-wrap > div {
  display:table-cell;
  text-align:center;
  border:1px solid black;    /* here to show how the cells are aligned */
  width:33%;
}

Of course, you would style your text within each child div accordingly.

http://codepen.io/bbennett/pen/zxKZLb