Technique CSS pour une ligne horizontale avec des mots Au milieu

après avoir essayé différentes solutions, je suis venu avec un Valable pour différentes largeurs de texte, n'importe quel arrière-plan possible et sans ajouter de markup 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é en 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 en 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 à ce que nous puissions en tirer un à gauche et un à droite. Aussi, la largeur (40% dans ce cas) est très dépendante de la largeur du texte à l'intérieur.. avoir à penser à une solution pour que. Au moins le top: 1.2em s'assure que les lignes restent plus ou moins au centre du texte même si vous avez une taille de police différente.

il semble que cela fonctionne bien cependant: http://jsfiddle.net/tUGrf/3/

encore une autre méthode:

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

<span> your text </span>

Voici une 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/

pour plus tard(nowdays) browser, display:flex etd pseudo-elements rend facile à dessiner . border-style , box-shadow et même background aide 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; 
}

Donner de l'envergure d'un rembourrage pour faire plus d'espace entre le texte et la ligne.

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

<div class="hr-sect">Text</div>

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 celle sur ce post et j'ai lu un commentaire de thirtydot parlant de fieldset et legend et j'ai pensé que c'était tout.

je passe outre ces deux styles d'éléments, je suppose que vous pouvez copier les standards W3C pour eux et incluez-le dans votre classe .middle-line-text (ou peu importe comment 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 border styles et il fonctionne aussi dans Android ;) (testé sur kitkat 4.XX)

EDIT:

suivant L'idée de Bekerov Artur qui est une bonne option aussi, j'ai changé le .png image en base64 pour créer le tracé avec un .SVG de sorte que vous pouvez rendre dans n'importe quelle résolution et aussi 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écente...

Problèmes intéressant de noter:

utiliser background-color pour masquer une bordure n'est peut-être pas la meilleure solution. Si vous avez une couleur (ou une image) de fond complexe (ou inconnue), le masquage finira par échouer. En outre, si vous redimensionnez le texte, vous remarquerez que la couleur blanche de fond (ou n'importe quoi que vous définissez) commencera à couvrir le texte sur la ligne ci-dessus (ou ci-dessous).

vous ne voulez pas non plus " devinez " la largeur des sections soit, parce qu'il rend les styles très inflexible et presque impossible à mettre en œuvre sur un site responsive où la largeur du contenu est en train de changer.

Solution:

( View JSFiddle )

au Lieu de "masquage", un à la frontière 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 multi-ligne. Lignes simples seulement.
• balisage HTML n'est pas aussi élégant
• top propriété sur .line élément doit être la moitié de line-height . Donc, si vous avez un line-height de 1.5em , alors le top devrait être -.75em . C'est une limitation parce que ce n'est pas automatisé, et si vous appliquez ces styles sur des éléments avec des hauteurs de ligne différentes, alors vous pourriez avoir besoin de resoumettre votre style line-height .

pour moi, ces les limites l'emportent sur les "problèmes" que j'ai notés au début de ma réponse pour la plupart des mises en œuvre.

si quelqu'un se demande comment régler le titre de telle sorte qu'il apparaisse avec une distance fixe vers le côté gauche (et pas centré comme présenté ci-dessus), j'ai compris cela 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 .

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 va vous aider à

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:'"151900920"a0"151900920"a0"151900920"a0"151900920"a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

j'utilise une disposition de tableau pour remplir les côtés dynamiquement et 0-height, absolute-position divs pour le positionnement vertical dynamique:

• non codée en dur dimensions
• pas d'images
• pas de pseudo-éléments
• respecte le contexte
• aspect de la barre de commande

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

j'ai trouvé qu'un peu en dessous du vrai centre semble le mieux avec du texte; cela peut être ajusté où le 55% est (plus grande hauteur rend la barre plus basse). L'apparence de la ligne peut être changée où le border-bottom est.

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

de tant d'alternatives que je préférerais cette réponse comme il multi traverser les navigateurs de nos jours.

je l'utilise plus que l'un de mes page d'accueil . Comme il est conseillé de "n'ont qu'un seul <h1> " spécialement sur la page principale. Il est donc nécessaire de remplacer h1 par h2 ou plus.

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>

Je ne suis pas sûr, mais vous pourriez 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 étiquette de paragraphe et un arrière-plan trop. C'est un peu hacky et je ne sais pas si elle fonctionne sur tous les navigateurs, et vous devez définir la marge négative en fonction de la taille de la police. Fonctionne sur chrome.

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

<hr><p>def</p>

j'ai essayé la plupart des façons suggérées mais se termine avec quelques problèmes comme la pleine largeur, ou ne convient pas pour le contenu dynamique. Enfin j'ai modifié un code, et fonctionne parfaitement. Cet exemple de code dessinera 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 /

ne pas battre un cheval mort, mais je cherchais une solution, a fini ici, et était moi-même pas satisfait des options, surtout pour une raison quelconque, je n'ai pas été en mesure d'obtenir les solutions fournies ici pour travailler bien pour moi. (Probablement à cause d'erreurs de ma part...) Mais j'ai joué avec flexbox et voici quelque chose que j'ai pu travailler pour moi-même.

Certains paramètres sont câblés, mais seulement à des fins de démonstration. Je pense que cette solution devrait fonctionner. dans à peu près n'importe quel navigateur moderne. Il suffit de supprimer / ajuster les paramètres fixés pour le .classe flex-parent, ajuster les couleurs / text / stuff et (je l'espère) vous serez aussi heureux que je le 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 aussi enregistré ma solution ici: https://jsfiddle.net/Wellspring/wupj1y1a/1 /

plus facile que je ne l'ai vu, sans :before et :after http://codepen.io/bekerov/pen/QwbaNR