So zentrieren Sie eine Überschrift basierend auf einem bestimmten Wort

Question

Ich versuche, eine Kopfzeile für meine Website zu erstellen, aber ich versuche herauszufinden, das Beste, um es auszurichten.

Der Header ist etwas in Richtung "Willkommen bei SHEP an der Universität von XXXX". Ich versuche jedoch, den Satz um das Wort "SHEP" zentrieren zu lassen. Mit anderen Worten, ich versuche, den "SHEP" -Teil des Satzes als Dead-Center auf der Seite erscheinen zu lassen.

Ich habe ein paar Methoden wie <h1>Welcome to <span> SHEP </span> at the University of XXX</h1> und die Einstellung der Spannweite zum Ausrichten der Mitte versucht, aber ich kann nicht ganz bekommen es funktioniert.

Ich suche das Aussehen zu erreichen, wie 1 in # angezeigt wird, nicht 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%; } 

Siehe Fiddle

Answer 2

Sie margin zum Beispiel verwenden:

span { 
    margin: 25%; 
} 

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

Answer 3

Verwenden display:table für ein Wrapper div und dann display:table-cell für die untergeordneten Elemente. Sie nehmen die Breite der Verpackung gleichmäßig auf. Also, Ihr Markup etwas so sein würde:

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

Natürlich würden Sie Ihren Text innerhalb jedes Kind div entsprechend stylen.

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

Answer 4

Ihre beste Möglichkeit ist es, den Header-Tag Folgendes zu geben:

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

Margin-links gesetzt werden sollte, was auch immer die Breite der ersten Hälfte des Headers ist. Also, wenn 'Welcome to SH' 120 Pixel breit ist, dann setze das als negativen Rand links. Im Wesentlichen schieben Sie den Header 50% von der linken Seite weg und verschieben ihn dann um viele Pixel mit "margin-left" zurück.

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

Answer 5

Sie es Pseudoelement :before und :after und Position absolute jetzt H1 von dem Wort Shep ausgerichtet ist, mit verwenden können

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

Raum erstellen mit im spanpadding verwenden und es wird das Aussehen geben, dass der Text zentriert ist:

span{ 
    padding: 0 10px; 
} 

Answer 7

Sie nur Ich gehe davon aus möchte horizontal zentrieren.

Meine Lösung nutzt Flexbox mit justify-content: center, um die Elemente im Container zentriert auszurichten. Die Elemente sind die drei Komponenten der Überschrift: Text vor, "das Wort", Text nach.

HTML:

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

Die Schlagzeile in seine drei Teile geteilt, die zentrierte Wort in der zweiten 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

Diese 34 FF arbeitet und Chrome 39 aus der Box, erfordert Anbieter Präfixe für IE 10/11.