Tecnica CSS per una linea orizzontale con parole al centro

Sto cercando di creare una regola orizzontale con del testo al centro. 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: la linea viene creata impostando a border-bottomsul contenitore, h2quindi dando a h2un più piccolo line-height. Il testo viene quindi inserito in un nidificato spancon uno sfondo non trasparente.

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

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

Ho testato solo su Chrome, ma non c'è motivo per cui non dovrebbe funzionare in altri browser.

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

Dopo aver provato diverse soluzioni, ne ho trovato uno valido per diverse larghezze di testo, qualsiasi sfondo possibile 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%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

L'ho provato su IE8, IE9, Firefox e Chrome. Puoi verificarlo qui http://jsfiddle.net/Puigcerber/vLwDf/1/

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

<div><span>text TEXT</span></div>

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 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 .. bisogna pensare a una soluzione per questo. Almeno si top: 1.2emassicura che le linee rimangano più o meno al centro del testo anche se si hanno dimensioni del carattere diverse.

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

Metodo più breve e migliore:

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

<span> your text </span>

Ecco la soluzione basata su Flex.

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

<h1>Today</h1>

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

per browser successivi (oggi), display:flexe pseudo-elements rende più semplice disegnare. border-style, box-shadowE anche backgroundaiuta anche per il make-up.

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 */
}

<h1>side lines via flex</h1>

<div><span>text TEXT</span></div>

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

Dare alla span un'imbottitura per fare più spazio tra il testo e la linea.

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

Ho cercato alcune soluzioni per questa semplice decorazione e ne ho trovate alcune, alcune strane, alcune anche con JS per calcolare l'altezza del carattere e bla, bla, bla, quindi ho letto il uno su questo post e leggere un commento di trenta non parlando fieldsete legende ho pensato che fosse.

Sto sovrascrivendo quegli stili di 2 elementi, suppongo che potresti copiare gli standard W3C per loro e includerli nella tua .middle-line-textclasse (o come vuoi chiamarli) ma questo è quello che ho fatto:

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

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

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

MODIFICARE:

Seguendo l'idea di Bekerov Artur che è anche una buona opzione, ho cambiato l'immagine .png 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 nessun 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,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
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 successive ...

Problemi da notare:

utilizzando background-color per mascherare un bordo potrebbe non essere la soluzione migliore. Se hai un colore di sfondo (o immagine) complesso (o sconosciuto), il mascheramento alla fine fallirà. Inoltre, se ridimensioni il testo, noterai che il colore di sfondo bianco (o qualunque cosa tu abbia impostato) inizierà a coprire il testo sulla riga sopra (o sotto).

Inoltre, non si vuole "indovinare" quanto siano ampie le sezioni, perché rendono gli stili molto poco flessibili e quasi impossibili da implementare in un sito reattivo in cui la larghezza del contenuto sta cambiando.

Soluzione:

( Vedi JSFiddle )

Invece di "mascherare" un bordo con a background-color, usa la tua displayproprietà.

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

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 tua font-sizeproprietà su.group sull'elemento.

limitazioni:

• Nessun testo su più righe. Solo linee singole.
• Il markup HTML non è così elegante
• topla proprietà .linesull'elemento deve essere la metà di line-height. Quindi, se avete una line-heightdi 1.5em, allora la topdovrebbe essere -.75em. Questa è una limitazione perché non è automatizzata e se si applicano questi stili su elementi con altezze di linea diverse, potrebbe essere necessario riapplicare il proprio line-heightstile.

Per me, queste limitazioni superano le "problematiche" che ho notato all'inizio della mia risposta per la maggior parte delle implementazioni.

Questo ti dà una lunghezza fissa per le linee, ma funziona alla grande. Le lunghezze delle linee sono controllate aggiungendo o prendendo '\ 00a0' (spazio unicode).

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

<h1>side lines</h1>

Se qualcuno si sta chiedendo come impostare l'intestazione in modo che appaia a una distanza fissa dal lato sinistro (e non centrata 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à

Uso un layout di tabella per riempire dinamicamente i lati e div di altezza assoluta a 0 per il posizionamento verticale dinamico:

• nessuna dimensione codificata
• nessuna immagine
• nessun pseudo-elemento
• rispetta lo sfondo
• aspetto della barra di controllo

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

Ho scoperto che un po 'al di sotto del vero centro appare meglio con il testo; questo può essere regolato dove si 55%trova (l'altezza più alta rende la barra più bassa). L'aspetto della linea può essere modificato dove si border-bottomtrova.

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

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

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

Alcune impostazioni sono cablate, ma solo a scopo dimostrativo. Penso che questa soluzione dovrebbe funzionare in quasi tutti i browser moderni. Basta rimuovere / regolare le impostazioni fisse per la classe .flex-parent, regolare i colori / testo / cose e (spero) sarai felice come 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;
}

<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

Ho anche salvato la mia soluzione qui: https://jsfiddle.net/Wellspring/wupj1y1a/1/

Nel caso in cui qualcuno lo desideri, IMHO la migliore soluzione che utilizza CSS è tramite un flexbox.

Ecco un esempio:

.kw-dvp-HorizonalButton {
    color: #0078d7;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
}
.kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after {
    background-color: #0078d7;
    content: "";
    display: inline-block;
    float:left;
    height:1px;
}
.kw-dvp-HorizonalButton:before {
    order:1;
    flex-grow:1;
    margin-right:8px;
}
.kw-dvp-HorizonalButton:after {
    order: 3;
    flex-grow: 1;
    margin-left: 8px;
}
.kw-dvp-HorizonalButton * {
    order: 2;
}

    <div class="kw-dvp-HorizonalButton">
        <span>hello</span>
    </div>

Ciò dovrebbe sempre tradursi in un contenuto allineato perfettamente centrato con una linea a sinistra e a destra, con un margine facile da controllare tra la linea e il contenuto.

Crea un elemento di linea prima e dopo il massimo controllo e li imposta all'ordine 1,3 nel tuo contenitore flessibile mentre imposta il contenuto come ordine 2 (vai al centro). dare il prima / dopo un aumento di 1 li farà consumare allo stesso modo lo spazio più libero mantenendo il contenuto centrato.

Spero che questo ti aiuti!

Non ne sono troppo sicuro, ma potresti provare a usare una regola orizzontale e a spingere il testo sopra il suo margine superiore. Avrai bisogno di una larghezza fissa sul tag di paragrafo e anche uno sfondo. È un po 'confuso e non so se funzionerà su tutti i browser e devi impostare il margine negativo in base alla dimensione del carattere. Funziona su Chrome però.

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

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

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

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/

Per me questa soluzione funziona perfettamente ...

HTML

<h2 class="strikethough"><span>Testing Text</span></h2>

CSS

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}

Le persone che utilizzano Bootstrap 4 possono ottenere con questo metodo. le classi menzionate nel codice HTML provengono da Bootstrap 4.

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

E scrivi il tuo HTML in questo modo

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</div>

Linea orizzontale e verticale con parole al centro

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: red;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: red;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: red;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: red;
    display: block;
    height: 50%;
}

<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

Questa è anche una risposta in https://stackoverflow.com/a/57279326/6569224

• Immagine piccola creata 1x18 con un singolo punto di colore # e0e0e0
• Trasforma l'immagine in codice base64

Risultato:

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}

<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>