Come centrare un'intestazione basata su una determinata parola

Question

Sto provando a creare un'intestazione per il mio sito Web, tuttavia sto cercando di capire il modo migliore per allinearlo.

L'intestazione è qualcosa del tipo "Welcome to SHEP at the University of XXXX". Tuttavia, sto cercando di rendere la frase centrata attorno alla parola "SHEP". In altre parole, sto cercando di rendere la parte "SHEP" della frase in posizione centrale nella pagina.

Ho provato alcuni metodi come <h1>Welcome to <span> SHEP </span> at the University of XXX</h1> e l'impostazione dello span per allineare il centro, tuttavia non riesco a farlo funzionare.

sto cercando di ottenere l'aspetto che vedi nell'immagine # 1, non # 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%; } 

Vedi Fiddle

Answer 2

si potrebbe usare margin, per esempio:

span { 
    margin: 25%; 
} 

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

Answer 3

Usa display:table per un wrapper div e quindi display:table-cell per gli elementi figlio. Prenderanno la larghezza del wrapper in modo uniforme. Così, il vostro markup sarebbe qualcosa di simile a questo:

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%; 
} 

Naturalmente, si acconciare i vostri testo all'interno di ogni bambino div conseguenza.

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

Answer 4

La soluzione migliore è quella di dare al tag di intestazione seguente:

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

margin-left deve essere impostato su qualunque sia la larghezza della prima metà del l'intestazione è. Quindi, se 'Welcome to SH' è largo 120 pixel, quindi mettilo come margine negativo a sinistra. In sostanza, stai spostando l'intestazione al 50% dal lato sinistro, quindi spostandolo indietro di molti pixel usando 'margin-left'.

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

Answer 5

è possibile utilizzare pseudo elemento :before e :after e posizionarlo con absolute ora H1 è allineata dalla parola 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

Creare spazio con in span utilizzando padding e vi darà l'aspetto che il testo è centrato:

span{ 
    padding: 0 10px; 
} 

Answer 7

ti ho solo supporre voglio centrare orizzontalmente.

La mia soluzione utilizza la casella flessibile con justify-content: center per allineare gli elementi centrati all'interno del contenitore. Gli elementi sono i tre componenti del titolo: testo precedente, "la parola", testo dopo.

HTML:

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

Il titolo è suddiviso nelle sue tre parti, la parola al centro del secondo 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

Questo funziona in 34 FF e Chrome 39 dalla scatola, richiede prefissi vendor per IE 10/11.