Technique CSS pour une ligne horizontale avec des mots au milieu


286

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.


Est-ce pour l'intérieur d'une formbalise?
thirtydot

dans ce cas, comme l'a souligné thirtydot en réponse à ma réponse, vous voudrez peut-être rechercher les éléments fieldsetetlegend
Stephan Muller


Pour une solution sur fond transparent , voir Ligne avant et après texte centré sur fond transparent
web-tiki

Réponses:


404

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/


3
Ceci est ma solution préférée. Il fonctionne également sur OSX et certains autres ne le font pas. Si vous utilisez cette solution, n'oubliez pas de définir l'arrière-plan de la plage sur la même couleur que l'arrière-plan de votre page, il sera particulièrement évident de savoir ce que je veux dire si votre arrière-plan n'est pas blanc. ;)
DrLazer

1
un moyen de faire cela sur un quart du chemin à travers?
Troy Cosentino

1
Obtenez le texte en retrait à partir de la gauche en utilisant "text-align: left; text-indent: 40px;" dans le style h2.
Matt__C

15
Ce n'est pas flexible, car vous fixez la couleur d'arrière-plan du texte en blanc.
Chao

2
@NateBarbettini Sauf si la ligne sur laquelle vous essayez de le faire et le texte doit avoir des arrière-plans transparents pour les autres éléments derrière.
Coburn

266

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/


2
Je préfère aussi celui-ci. Pour obtenir un style où le texte est indenté de la gauche au lieu d'être centré, utilisez cette modification: h1 { débordement: caché; `text-align: gauche; `texte-indent: 40px; `}
Matt__C

9
C'est vraiment une bonne solution; d'autant plus qu'il fonctionne avec n'importe quel arrière-plan et ne nécessite pas de largeur définie sur l'élément de titre.
Luke

2
C'est bien. J'ai un peu adapté votre code pour aligner à gauche le texte et faire de l' :afterélément la largeur du bloc. Je suis curieux: quel est exactement le rôle de margin-right: -50%? Lorsque je cherchais du code, manquer cette propriété ferait que la décoration se briserait sur une autre ligne. Et même lorsque la :afterlargeur est affectée à 100%, j'ai toujours besoin de la marge de droite négative de 50% pour l'adapter. Pourquoi?
BeetleTheNeato

Si je comprends bien, l'ajout de marges négatives des deux côtés tire l'élément dans les deux sens, c'est pourquoi il est centré.
Puigcerber

2
L'une des choses que j'aime dans cette solution est qu'elle fonctionne pour les situations où vous ne savez pas de quelle couleur est l'arrière-plan. Jusqu'à présent, la meilleure solution pour ce problème.
JoeMoe1984

54

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/


3
Ceux-ci sont intelligents, mais j'espère bien que l'OP ne veut pas cela pour l'intérieur d'une formbalise. S'il le fait, comme vous le savez sûrement, il pourrait simplement utiliser fieldsetet legend.
thirtydot

1
Hé, vous avez raison à ce sujet. Autant y aller de toute façon si cela ne fonctionne pas .. pas sémantiquement correct mais c'est mieux que d'avoir à recourir à javascript pour quelque chose comme ça imo.
Stephan Muller

8
La meilleure solution que j'ai trouvée qui fonctionne bien lorsque l'écran est résidé et sans définir la couleur d'arrière-plan du texte est jsfiddle.net/vLwDf/268
Xavier John

Ouais @ xavier-john, c'est ma réponse ;)
Puigcerber

43

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>


4
Vous devez ajouter une description de ce que fait votre code, sauf si vous souhaitez qu'il soit supprimé.
inf3rno

Dans mon cas, la ligne semblait être un peu trop épaisse, donc je l'ai piraté en attribuant une famille de polices différente: cela font-family: monospace;fonctionnait bien.
Mikhail Vasin

38

Voici une solution basée sur Flex.

Un titre avec une ligne horizontale centrale sur ses côtés

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/


Comment obtenir un rembourrage?
Sylar

rapide et sale, vous pouvez ajouter un & nbsp;
chrismarx

1
J'utilise un autre élément: <h1><span>Today</span></h1>avec une marge / rembourrage sur la travée.
Jesse Buitenhuis

19

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. démo ci-dessous

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>


Merci pour cela, très lisse!
Jimmy Obonyo Abor

Parfait, seule solution qui a fonctionné pour moi lorsque le fond était une image
cjohansson

12

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


1
Nice, le seul problème est que vous devez définir l'arrière-plan sur blanc et ne pouvez pas le définir sur transparent.
Marnix

dans ce cas, vous devrez travailler avec deux lignes, une de chaque côté. Cela va être difficile à réaliser de manière propre ..
Stephan Muller

Mon approche préférée jusqu'à présent, mais malheureusement, cela ne fonctionne pas dans les clients de messagerie pour une raison quelconque (Gmail mobile et Web)
reedwolf

9

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

5

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.


Fonctionne sur chrome. Semble sémantique et assez simple. Fonctionne avec bootstrap.
Jeff Ancel

J'ai dû ajouter border-collapse: séparé de .group, car je l'utilise dans un fichier qui a un paramètre différent. Fonctionne très bien.
Brian MacKay

5

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

entrez la description de l'image ici

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


2

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 .


2
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


entre la ligne

<h6 class = "background"> ​​<span> <br> NOS SERVICES </span> </h6> c'est le code html
Dominic Amal Joe F

Joe, vous pouvez modifier votre propre réponse pour ajouter le code HTML - bien mieux que de le mettre dans des commentaires. Vous devez également ajouter quelques explications à la réponse.
Mogsdad

Désolé, Mogsdad, j'ai oublié de mettre le code html, c'est pourquoi je l'ai mis ici.
Dominic Amal Joe F

2

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:

entrez la description de l'image ici

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

2

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/


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!


0

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>

0

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/


0

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

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>

0

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


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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.