web-dev-qa-db-fra.com

Technique CSS pour une ligne horizontale avec des mots au milieu

J'essaie de créer une règle horizontale avec du texte au milieu ..__ Par exemple:

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

Est-il possible de faire cela en CSS? Sans tous les "-" tirets évidemment.

htmlcsscross-browser
227
Jason

voici à peu près ce que je ferais: la ligne est créée en définissant un border-bottom sur le h2 contenant puis en donnant au h2 un line-height plus petit. Le texte est ensuite placé dans une span imbriquée avec un arrière-plan non transparent.

HTML:

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

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

Je n’ai testé que dans Chrome, mais il n’ya aucune raison que cela ne fonctionne pas dans les autres navigateurs.

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

315
Darko Z

Après avoir essayé différentes solutions, je suis venu avec une solution valable pour différentes largeurs de texte, tous les fonds d’arrière-plans possibles et sans ajout de balises supplémentaires. 

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/

214
Puigcerber

Ok, celui-ci est plus compliqué mais ça marche 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: before et: after sont positionnés de manière absolue pour que nous puissions en tirer un à gauche et un à droite. En outre, la largeur (40% dans ce cas) est très dépendante de la largeur du texte à l'intérieur. Il faut donc penser à une solution. Au moins top: 1.2em s'assure que les lignes restent plus ou moins au centre du texte même si la taille de la police est différente.

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

54
Stephan Muller

Encore une autre méthode:

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

36
Rafael

Voici la solution basée sur Flex.

HTML:

<h1>Today</h1>

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/

25
Tsuneo Yoshioka

pour les navigateurs plus récents (de nos jours), display:flex et d pseudo-elements facilitent le dessin. border-style, box-shadow et même background aident aussi pour le maquillage .  demo below 

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>

14
G-Cyr

.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;
}
<div class="hr-sect">Text</div>

9
Sujal Patel
<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; 
}

Attribuez un rembourrage à la plage afin de créer plus d'espace entre le texte et la ligne.

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

9
Stephan Muller

J'ai cherché des solutions pour cette décoration simple et j'en ai trouvé plusieurs, certaines étranges, certaines même avec JS pour calculer la hauteur de la police et bla, bla, bla, puis j'ai lu le sur ce post et lisez un commentaire de thirtydot parlant de fieldset et legend et j’ai pensé que c’était tout.

Je remplace ces styles de 2 éléments, je suppose que vous pourriez copier les normes du W3C et les inclure dans votre classe .middle-line-text (ou ce que vous voulez appeler), mais voici 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 cela fonctionne aussi sous Android;) (testé sur KitKat 4.XX)

MODIFIER:

Suivant l’idée de Bekerov Artur, qui est également une option intéressante, j’ai modifié l’image .png en base64 pour créer le trait avec un .SVG afin que vous puissiez effectuer le rendu dans n’importe quelle résolution et modifier également la couleur de l’élément sans autre logiciel.

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

Solution pour IE8 et plus récent ...

Points à noter:

Utiliser background-color pour masquer une bordure peut ne pas être la meilleure solution. Si vous avez une couleur d'arrière-plan (ou une image) complexe (ou inconnue), le masquage échouera. De plus, si vous redimensionnez le texte, vous remarquerez que la couleur de fond blanche (ou celle que vous définissez) commence à recouvrir le texte sur la ligne située au-dessus (ou au-dessous).

Vous ne voulez pas non plus "guesstimate" quelle est 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 propriété display.

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 propriété font-size sur l'élément .group.

Limitations:

  • Pas de texte multiligne. Lignes simples seulement.
  • Le balisage HTML n'est pas aussi élégant
  • La propriété top sur l'élément .line doit être égale à la moitié de line-height. Donc, si vous avez un line-height de 1.5em, alors la top devrait être -.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 style line-height.

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

5
Mike McLin

Cela vous donne une largeur de ligne statique, mais fonctionne très bien .. La largeur de ligne est contrôlée en ajoutant ou en prenant '\ 00a0' (un espace Unicode).

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

3
tomyo

Parmi tant d’alternatives, je préférerais cette réponse car elle traverse plusieurs navigateurs actuels. 

Je l'utilise plus d'une de mes page d'accueil. Comme il est conseillé de n’avoir qu’un seul <h1> en particulier sur la page principale. Il est donc nécessaire de changer h1 en h2 ou supérieur. 

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 */
}
<h2>side lines via flex</h2>

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


2
Dominic Amal Joe F

Si quelqu'un se demande comment définir le titre de sorte qu'il apparaisse avec une distance fixe vers le 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%;
}

Ici le JSFiddle .

2
m4r73n

J'utilise une disposition de tableau pour remplir les côtés de manière dynamique et des divisions de hauteur absolue et de position absolue pour le positionnement vertical dynamique:

 enter image description here

  • aucune dimension codée en dur
  • pas d'images
  • pas de pseudo-éléments
  • respecte le fond
  • apparence de la barre de contrôle

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

J'ai trouvé qu'un peu en-dessous du centre réel semble plus beau avec le texte; ceci peut être ajusté là où le 55% est (plus la hauteur est haute, plus la barre est basse). L'apparence de la ligne peut être modifiée là où se trouve le border-bottom.

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

Sans vouloir battre un cheval mort, mais je cherchais une solution, je me suis retrouvé ici et je n’étais pas satisfait des options, et ce pour une raison quelconque, je n’ai pas été en mesure d’obtenir les solutions fournies ici pour bien fonctionner pour moi. (Probablement à cause d'erreurs de ma part ...) Mais je jouais avec la flexbox et voici quelque chose qui m'a permis de me mettre au travail.

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 les paramètres fixes pour la classe .flex-parent, ajustez les couleurs/texte/substance et (j'espère) que vous serez aussi heureux que moi 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 aussi enregistré ma solution ici: https://jsfiddle.net/Wellspring/wupj1y1a/1/

0
Wellspring

Les personnes qui utilisent Bootstrap 4 peuvent obtenir des résultats 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 ça

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

J'ai essayé la plupart des méthodes suggérées, mais quelques problèmes tels que la largeur totale ou Ne convient pas au contenu dynamique se terminent. Enfin, j'ai modifié un code et fonctionne parfaitement. Cet exemple de code dessine ces lignes avant et après, et il est flexible pour 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/

0
Fasil kk

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;
}
0
طلحة

Horizontal et Ligne 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>

Ceci est également répondu dans https://stackoverflow.com/a/57279326/6569224

0
Mahdi Bashirpour

Je n'en suis pas trop sûr, mais vous pouvez utiliser une règle horizontale et 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 si. 

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

<hr><p>def</p>
0
Munim