Horizontale Linie auf Zeilenmitte

Jormungand · #1 (**permalink**) 08.10.2013, 10:07

Hallo zusammen,

für eine responsive Website versuche ich eine Lösung zu finden. Eine horizontale Linie auf Höhe der Zeilenmitte wird mittig von einer Überschrift von variabler Länge unterbrochen. Der Abstand von den Linien zur Überschrift soll immer gleich sein. Vielleicht erklärt ein Bild besser:

Ich habe es mit dem Bootstrap-Raster versucht:

Code:

<div class="row">
   <div class="span4"><hr /></div>
   <div class="span4"><h1>Überschrift</h1></div>
   <div class="span4"><hr /></div>
</div>

Damit würden aber bei kleinen Viewports die Linien und die Überschrift untereinander stehen. Außerdem wäre die Breite der Überschrift auf 4 Rastereinheiten (span4) festgelegt.

Gibt es da variablere Lösungen?

Schöne Grüße
Jormungand

explanator · #2 (**permalink**) 08.10.2013, 11:07

So etwa:

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
           .headline {
                border-bottom: 2px solid black;
            }
            .headline h1 {
                position: relative;
                margin-top: 0em;
                top: 1.25em;
                text-align: center;
            }
            .headline h1 em {
                font: 1em/1em black;
                background-color: white;
                padding: 0 4px;
            }
        </style>
    </head>
    <body>
        <div class="headline">
            <h1><em>Hallo Welt!</em></h1>
        </div>
        <div class="headline">
            <h1><em>Hallo Weltenbummler!</em></h1>
        </div>
    </body>
</html>

Jormungand · #3 (**permalink**) 08.10.2013, 18:58

Hallo explanator,

dein Code hat super geklappt!

Danke für deinen Rat.

Schöne Grüße
Jormungand

dazzle89 · #4 (**permalink**) 09.10.2013, 08:19

Guter Ansatz, aber macht es nicht mehr Sinn mit :after oder :before zu arbeiten, statt zusätzliches Markup zu verwenden?

explanator · #5 (**permalink**) 09.10.2013, 14:51

Zitat:

Zitat von dazzle89

Guter Ansatz, aber macht es nicht mehr Sinn mit :after oder :before zu arbeiten, statt zusätzliches Markup zu verwenden?

Hast du dafür ein Beispiel, wie das gehen könnte?

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Horizontale Linie wird im IE6 zu weit unten angezeigt	urban	CSS	10	16.07.2009 10:35
Doppelte Borderstärke bzw. doppelte horizontale Linie	xenia	CSS	6	18.12.2008 20:16
horizontale Linie (hr) + Text	wasserbauch	CSS	1	24.10.2008 13:22
1px horizontale Linie im IE6	quarki69	CSS	10	16.06.2008 16:57
Horizontale Linie	thespeedy	CSS	4	07.02.2008 20:56