CSS technique pour une ligne horizontale avec les mots dans le milieu

C'est à peu près comment je ferais: la ligne est créée par la définition d'une border-bottom sur le contenant h2 de donner les h2 un petit line-height. Le texte est ensuite mis dans un imbriquée span avec un non-arrière-plan transparent.

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

HTML:

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

Je l'ai testé dans Chrome seulement, mais il n'y a aucune raison qu'il ne devrait pas travailler dans d'autres navigateurs.

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

Ok, c'est plus compliqué mais ça marche en tout, sauf dans 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; 
}

Le :before et :after éléments en position absolue, de sorte que nous pouvons tirer de l'une à gauche et une à droite. Aussi, la largeur (40% dans ce cas) est très dépendante de la largeur du texte à l'intérieur.. ont pour réfléchir à une solution pour que. Au moins la top: 1.2em fait que les lignes restent plus ou moins dans le centre du texte, même si vous avez la taille de police différente.

Il ne semble pas bien fonctionner si: http://jsfiddle.net/tUGrf/3/

Voici Flex solution.

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/

CSS:

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

HTML:

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

J'ai été en regardant autour de certaines solutions pour ce décor simple et je l'ai trouvé tout à fait un peu, un peu bizarre, certains 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 parler de fieldset et legend et je pensais que c'était elle.

Je suis substituant ces 2 éléments styles, je pense que l'on peut copier les normes W3C pour eux et de les inclure sur votre .middle-line-text classe (ou ce que 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 il fonctionne aussi sur Android 😉 (Testé sur kitkat 4.XX)

EDIT:

Suivantes Bekerov Artur une idée de ce qui est une bonne option aussi, j'ai changé la .png base64 image pour créer des la course avec une .SVG, donc vous pouvez vous rendre dans n'importe quelle résolution et également changer la couleur de l'élément sans les autres logiciels concernés 🙂

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

Cela vous donne une statique de la largeur de la ligne, mais fonctionne très bien.
La largeur de la ligne est contrôlée par ajout ou '\00a0 " (un espace unicode).

CSS:

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

HTML:

<h1>side lines</h1>

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

Pas à battre un cheval mort, mais j'étais à la recherche d'une solution, retrouvé ici, et ne me suis pas satisfait avec les options, au moins pas pour une raison quelconque, je n'étais pas en mesure d'obtenir le permis de travail pour moi. (Probablement due à des erreurs de ma part...), Mais j'ai joué avec flexbox et voici quelque chose que j'ai eu à travailler pour moi-même.

Certains paramètres sont câblés, mais seulement à des fins de démonstration. J'avais pense que cette solution doit travailler dans à peu près n'importe quel navigateur moderne. Juste supprimer/ajuster la position fixe pour les .flex-classe parent, ajuster les couleurs/texte/trucs et (j'espère), vous serez aussi heureux que je le suis avec cette approche.

HTML:

CSS:

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

HTML:

<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 sauvé ma solution ici:
https://jsfiddle.net/Wellspring/wupj1y1a/1/

J'ai essayé la plupart des méthodes suggérées, mais se termine avec quelques problèmes comme sur toute la largeur, ou ne convient Pas pour le contenu dynamique. Enfin j'ai modifié un code, et fonctionne parfaitement. Cet exemple de code dessinez les lignes avant et après, et il est flexible en modifier le contenu. Centre alignés trop.

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/

Les personnes qui sont à l'aide de Bootstrap 4 peut atteindre avec cette méthode. classes visées dans le code HTML sont 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 d'écrire votre code HTML comme ceci

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

• Créés petite image 1x18 avec un seul point de couleur #e0e0e0
• Transformé l'image en base64 code

Résultat:

CSS:

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
}

HTML:

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