Selbst Linien über Titel und vor und nach dem Untertitel

Question

Ich versuche, eine Linie über meinen Titel zu bekommen, dass Linien gleichmäßig mit Linien vor und nach meinem `Untertitel

ich zwei Referenzen sah:

• Line before and after title over image

• CSS technique for a horizontal line with words in the middle

Diese haben mir geholfen, loszulegen, aber ich bin mir nicht sicher, wie ich trotz der Länge des Titels oder Untertitels die obere Zeile auch mit den Vorher- und Nachher-Zeilen erreichen kann.

<div class="title"> 
<h1>Testingtesting</h1> 
</div> 
<div class="sub-title"> 
<h1>Testing</h1> 
</div> 

<style> 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300); 
h1 { 
width: 20%; 
margin: .7em auto; 
overflow: hidden; 
text-align: center; 
font-weight:300; 
color: #000; 
} 
h1:before, h1:after { 
content: ""; 
display: inline-block; 
width: 50%; 
margin: 0 .1em 0 -55%; 
vertical-align: middle; 
border-bottom: 1px solid; 
} 
h1:after { 
margin: 0 -55% 0 .1em; 
} 
span { 
display: inline-block; 
vertical-align: middle; 
} 
.title h1 { 
border-top: 1px solid black 
} 
.title h1:before, .title h1:after { 

border-bottom: 0px solid; 
} 

</style> 

Answer 1

Sie sollten Leerzeichen verwenden: wrap; Es sollte nach der Verwendung funktionieren, da Sie die Breite für das Element festgelegt haben, auf dem Sie dies festlegen.

Zum Beispiel

} 

.title h1:after { 
    content:"\A"; 
    white-space: pre; 
} 

Erläuterung

In CSS: nach verwendet wird, einige Inhalte als pseudo-Element bekannt, zu erzeugen. Das "\ A" wird als Zeilenumbruch interpretiert, vorausgesetzt, dass der Leerraum erhalten bleibt. Daher müssen Sie white-space: pre setzen. Schließlich muss das Element inline sein, also display: inline.

Answer 2

Ich glaube, dass ich in der Lage war, mit dem Einsatz von Flexbox zu erreichen, was Sie wollen. TL; DR: siehe Schnipsel unten.

Zuerst verschachtelte ich div.sub-title innerhalb div.title im HTML.

Dann habe ich den div.title in einen flexiblen Behälter mit display: flex gedreht und die Fließrichtung auf column eingestellt. Durch das Hinzufügen von werden die Elemente im Container zentriert.

Als nächstes zielte ich das erste h1 Element, Hinzufügen eines border-top und border-bottom. Du kannst es so dick machen wie du magst - ich setze 4px. Wenn Sie den Abstand zwischen den Rahmen und dem Titel hinzufügen oder verringern möchten, passen Sie padding an.

Ich zielte dann auf den div.sub-title Container. Ich gab ihm eine position von relative und dann versetzte seine Position vertikal mit top: -45px. Sie können diesen Wert anpassen, um ihn so zu zentrieren, wie Sie es möchten. Ich habe eine Null line-height angewendet, um den Standardwert zu entfernen, der in einer Überschrift ziemlich groß ist. Um den Abstand zwischen dem Untertitel und der Linie auf beiden Seiten anzupassen, fügen Sie padding zu div.sub-title -I verwendet 20px hinzu. Fügen Sie schließlich eine Hintergrundfarbe hinzu, die dem Hintergrund Ihrer Seite entspricht.

Während dies funktioniert, wird es weitgehend davon abhängen, wie viele vordefinierte Werte Sie verwenden können (wie padding und background-color).

Eine andere Sache zu beachten ist, wenn die Bildschirmbreite zu klein wird, und der Untertitel wraps, wird es wirklich hässlich aussehen. Dies liegt daran, dass line-height auf Null gesetzt ist.Um dies zu beheben, können Sie min-width auf div.title setzen, um zu verhindern, dass der gesamte Container eine bestimmte Breite unterschreitet, oder line-height in div.sub-title an einem bestimmten Haltepunkt mit einer Medienabfrage zurücksetzen.

.title { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    align-items: center; 
 
    min-width: 350px; 
 
} 
 
.title > h1 { 
 
    display: inline; 
 
    padding: 30px 0; 
 
    border-top: 4px solid black; 
 
    border-bottom: 4px solid black; 
 
    text-align: center; 
 
} 
 
.sub-title { 
 
    position: relative; 
 
    top: -45px; 
 
    
 
    /* reset this w/ a media query when screen size gets too small */ 
 
    line-height: 0px; 
 
    
 
    padding: 0 20px; 
 
    background-color: #fff; 
 
}

<body> 
 

 
    <div class="title"> 
 
    <h1>Tomorrow Or Something Longer</h1> 
 
    <div class="sub-title"> 
 
     <h1>Today or something</h1> 
 
    </div> 
 
    </div> 
 

 
</body>