How to center a heading based on a certain word - html

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

Answer 3

Create space with in the span using padding and it will give the appearance that the text is centered:
span{
padding: 0 10px;
}

Answer 4

You could use margin, for instance:
span {
margin: 25%;
}
http://jsfiddle.net/yjw0t27r/1/

Answer 5

you can use pseudo element :before and :after and position it using absolute now h1 is aligned from the Shep word
div {
text-align: center
}
h1 {
display: inline-block;
position: relative;
border: 1px solid red;
}
h1:before {
content: 'Welcome to ';
position: absolute;
right: 50px;
width: 238px;
}
h1:after {
content: ' at the University of XXXX';
position: absolute;
left: 50px;
width: 434px;
}
<div>
<h1>SHEP</h1>
</div>

Answer 6

Your best option is to give the header tag the following:
h1{
display: inline-block;
position: relative;
left: 50%;
margin-left: -120px;
}
Margin-left should be set to whatever the width of the first half of the header is. So, if 'Welcome to SH' is 120 pixels wide, then put that as the negative margin left. Essentially, you're pushing the header 50% away from the left side, then moving it back however many pixels using 'margin-left'.
codepen here: http://codepen.io/anon/pen/KwgWQo

Answer 7

I assume you only want to center horizontally.
My solution utilizes flexbox with justify-content: center to align the items centered within the container. The items are the three components of the headline: text before, "the word", text after.
HTML:
<h1 class="word-centered"><span>Welcome to the great </span><span>Stackoverflow</span><span> universitiy</span></h1>
The headline is split into its three parts, the centered word in the second span.
CSS:
/* make the items flex (in a row by default); center the items in the container */
.word-centered {
display: flex;
justify-content: center;
}
/* make the left and right part use all remaining space; padding to space the words */
.word-centered span:nth-child(1), .word-centered span:nth-child(3) {
flex: 1;
margin: 0 5px;
}
/* since the first span uses all space between the middle item and the left edge, align the text right */
.word-centered span:nth-child(1) {
text-align: right;
}
Demo: http://jsbin.com/foduvuvoxa/1
This works in FF 34 and Chrome 39 out of box, requires vendor prefixes for IE 10/11.