How to center a title based on a specific word

Question

I am trying to create a headline for my website, however I am trying to figure out how to best align it.

The headline is something like "Welcome to SHEP at XXXX University." However, I am trying to make the sentence centered around the word "SHEP". In other words, I'm trying to make part of the "SHEP" sentence a sentence on the page.

I tried several methods, such as <h1>Welcome to <span> SHEP </span> at the University of XXX</h1> and set the spacing for center alignment, however I cannot get it to work.

I am looking to look like shown 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 to wrap the div , and then display:table-cell for children. They will evenly distribute the width of the wrapper. So your markup will 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 must appropriately fit the text in each child of the div .

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

Answer 3

Create space using span with padding and this will give the appearance that the text is centered:

 span{ padding: 0 10px; } 

Answer 4

You can use margin , for example:

 span { margin: 25%; } 

http://jsfiddle.net/yjw0t27r/1/

Answer 5

you can use the :before and :after pseudo-element and place it with absolute now h1 is aligned from the word Shep

 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 title tag the following:

 h1{ display: inline-block; position: relative; left: 50%; margin-left: -120px; } 

Margin-left should contain the width of the first half of the header. So, if “Welcome to SH” is 120 pixels wide, put it as a negative field. Essentially, you click on the title 50% to the left of the left side, and then move it like many pixels using "margin-left".

codepen here: http://codepen.io/anon/pen/KwgWQo

Answer 7

I assume that you only want to focus horizontally.

My solution uses flexbox with justify-content: center to align elements located inside the container. Elements are the three components of the title: text before, “word”, text after.

HTML:

 <h1 class="word-centered"><span>Welcome to the great </span><span>Stackoverflow</span><span> universitiy</span></h1> 

The title is divided into 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, so vendor prefixes are required for IE 10/11.