Tecnica CSS per una linea orizzontale con le parole nel mezzo

Sto provando a fare una regola orizzontale con del testo nel mezzo. Per esempio:

———————————– il mio titolo qui ———— —————–

C’è un modo per farlo in CSS? Senza tutti i trattini “-” ovviamente.

questo è più o meno come lo farei io: la linea viene creata impostando un border-bottom sul contenente h2 quindi dando a h2 una più piccola line-height . Il testo viene quindi inserito in un span annidato con uno sfondo non trasparente.

HTML:

 

THIS IS A TEST

this is some content other

CSS:

 h2 { width: 100%; text-align: center; border-bottom: 1px solid #000; line-height: 0.1em; margin: 10px 0 20px; } h2 span { background:#fff; padding:0 10px; } 

Ho provato solo in Chrome, ma non c’è motivo per cui non dovrebbe funzionare in altri browser.

JSFiddle: http://jsfiddle.net/7jGHS/

Dopo aver provato diverse soluzioni, sono arrivato con uno valido per diverse larghezze di testo, qualsiasi background ansible e senza aggiungere markup extra.

 h1 { overflow: hidden; text-align: center; } h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h1:before { right: 0.5em; margin-left: -50%; } h1:after { left: 0.5em; margin-right: -50%; } 
 

Heading

This is a longer heading

Ok, questo è più complicato ma funziona in tutto tranne IE <8

 
text TEXT
div { text-align: center; position: relative; } span { display: inline-block; } span:before, span:after { border-top: 1px solid black; display: block; height: 1px; content: " "; width: 40%; position: absolute; left: 0; top: 1.2em; } span:after { right: 0; left: auto; }

Gli elementi: before e after after sono posizionati in modo assoluto in modo da poterne tirare uno a sinistra e uno a destra. Inoltre, la larghezza (40% in questo caso) dipende molto dalla larghezza del testo all’interno .. devi pensare a una soluzione per questo. Almeno il top: 1.2em assicura che le linee rimangano più o meno al centro del testo anche se hai una diversa dimensione del carattere.

Sembra funzionare bene però: http://jsfiddle.net/tUGrf/3/

Ancora un altro metodo:

 span:after, span:before{ content:"\00a0\00a0\00a0\00a0\00a0"; text-decoration:line-through; } 
  your text  

Ecco la soluzione basata su Flex.

HTML:

 

Today

CSS:

 h1 { display: flex; flex-direction: row; } h1:before, h1:after{ content: ""; flex: 1 1; border-bottom: 1px solid #000; margin: auto; } 

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

per il browser successivo (oggi), display:flex gli pseudo-elements display:flex andd lo rendono facile da disegnare. border-style , box-shadow e persino background aiuta anche per il trucco. demo di seguito

 h1 {margin-top:50px; display:flex; background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);; } h1:before, h1:after { color:white; content:''; flex:1; border-bottom:groove 2px; margin:auto 0.25em; box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */ } 
 

side lines via flex

 
text TEXT
div { height: 1px; border-top: 1px solid black; text-align: center; position: relative; } span { position: relative; top: -.7em; background: white; display: inline-block; }

Dare allo span un riempimento per creare più spazio tra il testo e la linea.

Esempio: http://jsfiddle.net/tUGrf/

 .hr-sect { display: flex; flex-basis: 100%; align-items: center; color: rgba(0, 0, 0, 0.35); margin: 8px 0px; } .hr-sect::before, .hr-sect::after { content: ""; flex-grow: 1; background: rgba(0, 0, 0, 0.35); height: 1px; font-size: 0px; line-height: 0px; margin: 0px 8px; } 
 
Text

Ho cercato soluzioni per questa semplice decorazione e ne ho trovate alcune, alcune strane, alcune anche con JS per calcolare l’altezza del font e bla, bla, bla, quindi ho letto il uno su questo post e leggere un commento da trenta che parla di fieldset e legend e ho pensato che fosse.

Sto ignorando questi due stili di elementi, credo che potresti copiare gli standard del W3C per loro e includerlo nella tua .middle-line-text (o qualsiasi altra cosa tu voglia chiamare) ma questo è ciò che ho fatto:

   

Ecco il violino: http://jsfiddle.net/legnaleama/3t7wjpa2/

Ho giocato con gli stili di bordo e funziona anche su Android;) (Testato su kitkat 4.XX)

MODIFICARE:

Seguendo l’idea di Bekerov Artur, che è anche una buona opzione, ho modificato l’immagine di base64 per creare il tratto con un .SVG in modo da poter eseguire il rendering in qualsiasi risoluzione e anche cambiare il colore dell’elemento senza alcun altro software coinvolto 🙂

 /* SVG solution based on Bekerov Artur */ /* Flexible solution, scalable, adaptable and also color customizable*/ .stroke { background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-position: left; text-align: center; } .stroke h3 { background-color: #ffffff; margin: 0 auto; padding:0 10px; display: inline-block; font-size: 66px; } 

Soluzione per IE8 e versioni più recenti …

Problemi degni di nota:

L’utilizzo background-color di background-color per mascherare un bordo potrebbe non essere la soluzione migliore. Se si dispone di un colore di sfondo (o di un’immagine) complesso (o sconosciuto), il mascheramento alla fine fallirà. Inoltre, se ridimensionate il testo, noterete che il colore di sfondo bianco (o qualsiasi altra cosa impostate) inizierà a coprire il testo sulla riga sopra (o sotto).

Inoltre, non si vuole “stimare” quanto ampie siano le sezioni, perché rende gli stili molto rigidi e quasi impossibili da implementare in un sito reattivo in cui la larghezza del contenuto sta cambiando.

Soluzione:

( Visualizza JSFiddle )

Invece di “mascherare” un bordo con un background-color , usa la proprietà display .

HTML

 
This is a test

CSS

 .group { display: table; width: 100%; } .item { display: table-cell; } .text { white-space: nowrap; width: 1%; padding: 0 10px; } .line { border-bottom: 1px solid #000; position: relative; top: -.5em; } 

Ridimensiona il testo posizionando la proprietà font-size .group sull’elemento .group .

limitazioni:

  • Nessun testo su più righe. Solo linee singole.
  • Il markup HTML non è elegante
  • top proprietà top sull’elemento .line deve essere metà line-height della line-height . Quindi, se hai un line-height di 1.5em , la parte top dovrebbe essere -.75em . Questa è una limitazione perché non è automatizzata e, se si applicano questi stili a elementi con altezze di linea diverse, potrebbe essere necessario riapplicare lo stile line-height .

Per me, queste limitazioni superano i “problemi” che ho notato all’inizio della mia risposta per la maggior parte delle implementazioni.

Se qualcuno si sta chiedendo come impostare l’intestazione in modo tale che appaia con una distanza fissa sul lato sinistro (e non centrato come presentato sopra), l’ho capito modificando il codice di @ Puigcerber.

 h1 { white-space: nowrap; overflow: hidden; } h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; } h1:before { right: 0.3em; width: 50px; } h1:after { left: 0.3em; width: 100%; } 

Qui il JSFiddle .

 h6 { font: 14px sans-serif; margin-top: 20px; text-align: center; text-transform: uppercase; font-weight: 900; } h6.background { position: relative; z-index: 1; margin-top: 0%; width:85%; margin-left:6%; } h6.background span { background: #fff; padding: 0 15px; } h6.background:before { border-top: 2px solid #dfdfdf; content: ""; margin: 0 auto; /* this centers the line to the full width specified */ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; } 

questo ti aiuterà

tra la linea

Questo ti dà una larghezza di linea statica, ma funziona alla grande. La larghezza della linea è controllata aggiungendo o prendendo ‘\ 00a0’ (uno spazio unicode).

 h1:before, h1:after { content:'\00a0\00a0\00a0\00a0'; text-decoration: line-through; margin: auto 0.5em; } 
 

side lines

Uso un layout di tabella per riempire i lati dynamicmente e divisioni di altezza assoluta, posizione assoluta per il posizionamento verticale dinamico:

inserisci la descrizione dell'immagine qui

  • nessuna dimensione hard-coded
  • niente immagini
  • nessun pseudo-elemento
  • rispetta lo sfondo
  • aspetto barra di controllo

https://jsfiddle.net/eq5gz5xL/18/

Ho scoperto che un po ‘al di sotto del vero centro sembra migliore con il testo; questo può essere regolato dove è il 55% (l’altezza più alta riduce la barra). L’aspetto della linea può essere cambiato dove è il border-bottom .

HTML:

 
Title

CSS:

 .title{ display: table; width: 100% background: linear-gradient(to right, white, lightgray); } .title-row{ display: table-row; } .bar-container { display: table-cell; position: relative; width: 50%; } .bar { position: absolute; width: 100%; top: 55%; border-bottom: 1px solid black; } .text { display: table-cell; padding-left: 5px; padding-right: 5px; font-size: 36px; } 

Da così tante alternative preferirei questa risposta in quanto multi attraversa i browser di oggi.

Lo uso più di una mia homepage . Poiché è consigliabile avere un solo

particolare nella pagina principale. Quindi è necessario cambiare da h1 a h2 o superiore.

 h2 {margin-top:50px; display:flex; background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);; } h2:before, h2:after { color:white; content:''; flex:1; border-bottom:groove 2px; margin:auto 0.25em; box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */ } 
 

side lines via flex

Non ne sono troppo sicuro, ma potresti provare a utilizzare una regola orizzontale e a spingere il testo sopra il margine superiore. Avrai bisogno di una larghezza fissa sul tuo tag di paragrafo e anche sullo sfondo. È un po ‘hacky e non so se funzionerà su tutti i browser, ed è necessario impostare il margine negativo in base alla dimensione del carattere. Funziona su Chrome però.

  

def

Ho provato la maggior parte dei modi suggeriti ma termina con alcuni problemi come la larghezza completa o Non adatto per il contenuto dinamico. Alla fine ho modificato un codice e funziona perfettamente. Questo codice di esempio disegnerà quelle linee prima e dopo, ed è flessibile nella modifica del contenuto. Anche il centro è allineato.

HTML

  

S

Long text

CSS

  h1 { display: inline-block; position: relative; text-align: center; } h1 span { background: #fff; padding: 0 10px; position: relative; z-index: 1; } h1:before { background: #ddd; content: ""; height: 1px; position: absolute; top: 50%; width: calc(100% + 50px);//Support in modern browsers left: -25px; } h1:before { left: ; } 

Risultato: https://jsfiddle.net/fasilkk/vowqfnb9/

Non per battere un cavallo morto, ma stavo cercando una soluzione, sono finito qui, e non ero soddisfatto delle opzioni, non ultimo per qualche motivo non ero in grado di ottenere le soluzioni fornite qui per funzionare bene per me. (Probabilmente a causa di errori da parte mia …) Ma ho giocato con la flexbox ed ecco qualcosa che ho avuto modo di lavorare per me stesso.

Alcune impostazioni sono cablate, ma solo per scopi dimostrativi. Penserei che questa soluzione dovrebbe funzionare in quasi tutti i browser moderni. Basta rimuovere / regolare le impostazioni fisse per la class .flex-genitore, regolare i colors / testo / materiale e (spero) sarai felice quanto me con questo approccio.

HTML:

 .flex-parent { display: flex; width: 300px; height: 20px; align-items: center; } .flex-child-edge { flex-grow: 2; height: 1px; background-color: #000; border: 1px #000 solid; } .flex-child-text { flex-basis: auto; flex-grow: 0; margin: 0px 5px 0px 5px; text-align: center; } 
 
I found this simpler!

Più facile di quanto ho visto, senza :before e :after http://codepen.io/bekerov/pen/QwbaNR