Technique CSS pour une ligne horizontale avec des mots au milieu

J'essaie de faire une règle horizontale avec du texte au milieu. Par exemple:

----------------------------------- mon titre ici ------------ -----------------

Existe-t-il un moyen de le faire en CSS? Sans tous les tirets "-" évidemment.

Voici à peu près comment je le ferais: la ligne est créée en mettant un border-bottomsur le contenant h2puis en donnant h2un plus petit line-height. Le texte est ensuite placé dans un imbriqué spanavec un arrière-plan non transparent.

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>

J'ai testé uniquement dans Chrome, mais il n'y a aucune raison pour que cela ne fonctionne pas dans d'autres navigateurs.

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

Après avoir essayé différentes solutions, je suis venu avec un valide pour différentes largeurs de texte, tout arrière-plan possible et sans ajouter de balisage supplémentaire.

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>

Je l'ai testé dans IE8, IE9, Firefox et Chrome. Vous pouvez le vérifier ici http://jsfiddle.net/Puigcerber/vLwDf/1/

Ok, celui-ci est plus compliqué mais il fonctionne dans tout sauf 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; 
}

Les éléments: avant et: après sont positionnés de manière absolue afin que nous puissions en tirer un à gauche et un à droite. De plus, la largeur (40% dans ce cas) est très dépendante de la largeur du texte à l'intérieur. Il faut réfléchir à une solution pour cela. Au moins, le top: 1.2ems'assure que les lignes restent plus ou moins au centre du texte même si vous avez une taille de police différente.

Cela semble bien fonctionner cependant: http://jsfiddle.net/tUGrf/3/

Méthode la plus courte et la meilleure:

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

<span> your text </span>

Voici une solution basée sur 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/

pour un navigateur ultérieur (de nos jours), display:flexandd pseudo-elements facilite le dessin. border-style, box-shadowet backgroundaide même aussi pour le maquillage.

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

Donnez à l'intervalle un remplissage pour faire plus d'espace entre le texte et la ligne.

Exemple: http://jsfiddle.net/tUGrf/

J'ai cherché des solutions pour cette décoration simple et j'en ai trouvé pas mal, certaines bizarres, certaines même avec JS pour calculer la hauteur de la police et bla, bla, bla, puis j'ai lu le un sur ce post et lire un commentaire de thirtydot en parlant fieldsetet legendet je pensais que c'était tout.

Je suis en train de remplacer ces 2 styles d'éléments, je suppose que vous pouvez copier les normes W3C pour eux et les inclure dans votre .middle-line-textclasse (ou comme vous voulez l'appeler) mais c'est ce que j'ai fait:

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

Voici le violon: http://jsfiddle.net/legnaleama/3t7wjpa2/

J'ai joué avec les styles de bordure et ça marche aussi sous Android;) (Testé sur kitkat 4.XX)

ÉDITER:

En suivant l'idée de Bekerov Artur, qui est également une bonne option, j'ai changé l'image .png base64 pour créer le trait avec un .SVG afin que vous puissiez effectuer le rendu dans n'importe quelle résolution et également changer la couleur de l'élément sans aucun autre logiciel impliqué :)

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

Solution pour IE8 et plus récent ...

Problèmes à noter:

Utiliser background-colorpour masquer une bordure n'est peut-être pas la meilleure solution. Si vous avez une couleur (ou une image) d'arrière-plan complexe (ou inconnue), le masquage échouera finalement. De plus, si vous redimensionnez le texte, vous remarquerez que la couleur d'arrière-plan blanc (ou tout ce que vous définissez) commencera à couvrir le texte sur la ligne au-dessus (ou en dessous).

Vous ne voulez pas non plus "estimer" la largeur des sections, car cela rend les styles très rigides et presque impossibles à mettre en œuvre sur un site réactif où la largeur du contenu change.

Solution:

( Voir JSFiddle )

Au lieu de "masquer" une bordure avec un background-color, utilisez votre displaypropriété.

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

Redimensionnez votre texte en plaçant votre font-sizepropriété sur l' .groupélément.

Limites:

• Pas de texte sur plusieurs lignes. Lignes simples uniquement.
• Le balisage HTML n'est pas aussi élégant
• topla propriété sur l' .lineélément doit être la moitié de line-height. Donc, si vous avez un line-heightde 1.5em, le topdevrait -.75em. Il s'agit d'une limitation car elle n'est pas automatisée et si vous appliquez ces styles à des éléments ayant des hauteurs de ligne différentes, vous devrez peut-être réappliquer votre line-heightstyle.

Pour moi, ces limitations l'emportent sur les "problèmes" que j'ai notés au début de ma réponse pour la plupart des implémentations.

Cela vous donne une longueur fixe pour les lignes, mais fonctionne très bien. La longueur des lignes est contrôlée en ajoutant ou en prenant '\ 00a0' (espace unicode).

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

<h1>side lines</h1>

Si quelqu'un se demande comment définir le titre de manière à ce qu'il apparaisse à une distance fixe du côté gauche (et non centré comme présenté ci-dessus), je l'ai compris en modifiant le code de @ 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%;
}

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

cela vous aidera

J'utilise une disposition de table pour remplir les côtés dynamiquement et des diviseurs de position absolue à 0 hauteur pour un positionnement vertical dynamique:

• pas de dimensions codées en dur
• pas d'images
• pas de pseudo-éléments
• respecte le contexte
• apparence de la barre de contrôle

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

J'ai trouvé qu'un peu en dessous du vrai centre semble mieux avec du texte; cela peut être ajusté là où se 55%trouve (une hauteur plus élevée rend la barre plus basse). L'apparence de la ligne peut être modifiée là où elle se border-bottomtrouve.

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

Ne pas battre un cheval mort, mais je cherchais une solution, je me suis retrouvé ici et je n'étais pas satisfait des options, notamment pour une raison quelconque, je n'ai pas pu obtenir que les solutions fournies ici fonctionnent bien pour moi. (Probablement à cause d'erreurs de ma part ...) Mais j'ai joué avec la flexbox et voici quelque chose que j'ai réussi à faire pour moi.

Certains paramètres sont câblés, mais uniquement à des fins de démonstration. Je pense que cette solution devrait fonctionner dans presque tous les navigateurs modernes. Supprimez / ajustez simplement les paramètres fixes de la classe .flex-parent, ajustez les couleurs / texte / trucs et (j'espère) vous serez aussi heureux que je suis avec cette approche.

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>

J'ai également enregistré ma solution ici: https://jsfiddle.net/Wellspring/wupj1y1a/1/

Juste au cas où quelqu'un le voudrait, à mon humble avis, la meilleure solution en utilisant CSS est une flexbox.

Voici un exemple:

.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>

Cela devrait toujours entraîner un contenu aligné parfaitement centré avec une ligne à gauche et à droite, avec une marge facile à contrôler entre la ligne et votre contenu.

Il crée un élément de ligne avant et après votre contrôle supérieur et les définit à l'ordre 1,3 dans votre conteneur flexible tout en définissant votre contenu comme ordre 2 (allez au milieu). donner l'avant / après une croissance de 1 leur fera consommer également l'espace le plus vacant tout en gardant votre contenu centré.

J'espère que cela t'aides!

Je ne suis pas trop sûr, mais vous pouvez essayer d'utiliser une règle horizontale et de pousser le texte au-dessus de sa marge supérieure. Vous aurez besoin d'une largeur fixe sur votre balise de paragraphe et d'un arrière-plan aussi. C'est un peu hacky et je ne sais pas si cela fonctionnera sur tous les navigateurs, et vous devez définir la marge négative en fonction de la taille de la police. Fonctionne sur le chrome cependant.

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

<hr><p>def</p>

J'ai essayé la plupart des méthodes suggérées, mais je me retrouve avec des problèmes comme la pleine largeur ou Ne convient pas au contenu dynamique. Enfin, j'ai modifié un code et fonctionne parfaitement. Cet exemple de code dessine ces lignes avant et après, et il est flexible dans le changement de contenu. Centre aligné aussi.

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

Résultat: https://jsfiddle.net/fasilkk/vowqfnb9/

Pour moi, cette solution fonctionne parfaitement bien ...

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

Les personnes qui utilisent Bootstrap 4 peuvent réussir avec cette méthode. les classes mentionnées dans le code HTML proviennent de 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;
 }

Et écrivez votre HTML comme ceci

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

Horizontal etLigne verticale avec des mots au milieu

.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>

On y répond également en https://stackoverflow.com/a/57279326/6569224

• Petite image créée 1x18 avec un seul point de couleur # e0e0e0
• Transformé l'image en code base64

Résultat:

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>