Ajouter du texte centré au milieu d'une ligne semblable à <hr />


217

Je me demande quelles options on a en xhtml 1.0 strict pour créer une ligne des deux côtés du texte comme ceci:

Section un
----------------------- Section suivante -----------------------
Section deux

J'ai pensé à faire des choses fantaisistes comme ça:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

Ou bien, parce que ce qui précède a des problèmes d'alignement (vertical et horizontal):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

Cela a également des problèmes d'alignement, que je résous avec ce gâchis:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

En plus des problèmes d'alignement, les deux options semblent «floues», et je serais très obligé si vous aviez déjà vu cela auparavant et connaissiez une solution élégante.


3
Voici un autre fil avec un défi sans balises supplémentaires - et une solution! stackoverflow.com/questions/12648513/…
willoller

1
stackoverflow.com/questions/5214127/… est toujours la meilleure solution.

Une réponse utile ici utiliserait la grille CSS.
Brian M. Hunt

Ajout d' une réponse (SCSS) qui transforme presque n'importe quel élément en un séparateur sans arrière-plan défini et permet de définir: la couleur et le style de trait (solide, pointillé, en pointillés) du séparateur, la position du texte (gauche, droite, centre), ainsi que la classe qui applique cette (par défaut .divider).
tao

Étant donné le support actuel de Flexbox, je pense que ma réponse pourrait gagner en visibilité.
MatTheCat

Réponses:


64

Je ne sais pas si cela a été compris, mais Flexbox offre une bonne solution:

<div class="separator">Next section</div>

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

Voir http://jsfiddle.net/MatTheCat/Laut6zyc/ pour la démo.

Aujourd'hui, la compatibilité n'est pas si mauvaise (vous pouvez ajouter toutes les anciennes syntaxes flexbox) et elle se dégrade gracieusement.


Meilleure réponse compte tenu du support de Flexbox ces jours-ci
Akivajgordon

c'est une bonne solution
Smaillns

217

Que diriez-vous:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

Découvrez ce JSFiddle .

Vous pouvez utiliser vw ou %pour le rendre réactif .


2
Obtenir une valeur maximale exacte est un peu difficile. Ce n'est pas exactement -0,5em;
Mitar

parfait. "
Réactif

4
Voir ma réponse pour une solution qui ne vous oblige pas à spécifier la couleur d'arrière-plan ou la largeur.
MartinF

Voir ma réponse pour bg réactif et transparent, style variable et hauteur du séparateur, position variable du texte. Peut également être appliqué plusieurs fois à différents sélecteurs, pour avoir plus d'un style de séparateur dans le même projet, en utilisant SCSS. Fonctionne avec tout font-size.
tao

193

La façon de résoudre ce problème sans connaître la largeur et la couleur d'arrière-plan est la suivante:

Structure

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

Exemple: http://jsfiddle.net/z8Hnz/

Double ligne

Pour créer une double ligne, utilisez l'une des options suivantes:

1) Espace fixe entre les lignes

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

Exemple: http://jsfiddle.net/z8Hnz/103/

2) Espace personnalisé entre les lignes

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 5px; /* space between lines */
    margin-top: -2px; /* adjust vertical align */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

Exemple: http://jsfiddle.net/z8Hnz/105/


Version SASS (SCSS)

Sur la base de cette solution, j'ai ajouté SCSS "avec propriété de couleur" si cela pouvait aider quelqu'un ...

//mixins.scss
@mixin bg-strike($color) {

    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    > span {

        position: relative;
        display: inline-block;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: $color;
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }
}

exemple d'utilisation:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

Cette version fonctionne mieux si vous utilisez une image pour la ligne - ou au moins il est plus facile de la modifier et de rester réactif
tehlivi

Très bon travail! Pouvez-vous utiliser votre magie pour créer une double ligne? (Sinon, je vais simplement recourir à une petite image d'arrière-plan répétitive.)
wloescher

3
Grand extrait! Merci :)
plong0

2
C'est la meilleure réponse, car cela fonctionnera sans définir l'arrière-plan, et lorsque vous devez définir l'arrière
Dinesh Dabhi

1
Le premier exemple est tout simplement génial! Félicitations! Ce devrait être la bonne réponse!
Luiz Eduardo

87

Vous pouvez accomplir cela avec :: avant et :: après sans connaître la largeur du conteneur ou la couleur d'arrière-plan, et pour obtenir un meilleur style des sauts de ligne. Par exemple, cela peut être modifié pour créer des lignes doubles, des lignes pointillées, etc.

JSFiddle

Utilisation de CSS et HTML:

.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">CATEGORY</div>

Version SCSS:

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;

    &:before, &:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin: 0 8px;
    }
}

1
Solution élégante, mais avec une mise en garde: s'il n'y aura pas de texte, vous aurez toujours un espace entre les lignes.
Farside

13
Pour être honnête, c'est la solution la plus propre dans ce fil, le problème sans texte peut être ignoré car vous voudriez toujours le séparateur avec du texte.
Robert

51

Essaye ça:

.divider {
	width:500px;
	text-align:center;
}

.divider hr {
	margin-left:auto;
	margin-right:auto;
	width:40%;

}

.left {
	float:left;
}

.right {
	float:right;
}
<div class="divider">
    <hr class="left"/>TEXT<hr class="right" />
</div>

Aperçu en direct sur jsFiddle .


4
Il fonctionne parfaitement et utilise <hr />, alors qu'est-ce qui pourrait mal tourner avec cette réponse? Je ne dis rien.
Kirby

4
+1 Pas besoin de jouer avec la couleur d'arrière-plan ou d'utiliser des balises de manière involontaire. Un inconvénient est que la .divider hrlargeur dépend de la longueur du texte. Suggestion: .divideret les .divider hrlargeurs doivent être spécifiées en emunités. Pour obtenir la hrlargeur, utilisez ( .dividerlargeur moins nombre de caractères) / 2.
Kelvin

12
Ce n'est pas la meilleure solution. Et si vous n'avez aucune certitude sur la largeur du texte. Tout sera ruiné lorsque le texte sera plus long.
Iwona Trąbka

C'est la meilleure et la plus simple réponse
ha9u63ar

1
40% a tort ici. Si le texte est plus long, il serait mal aligné
TomSawyer

21

Je viens de rencontrer le même problème, voici une façon de le résoudre:

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>

Cela fonctionne sans définir un arrière-plan sur l'élément de texte, c'est-à-dire qu'il aura l'air bien quel que soit l'arrière-plan derrière lui.

Vous pouvez l'essayer ici: http://jsfiddle.net/88vgS/


Ne résout pas le problème du PO. Cela crée deux lignes avec du texte entre elles. Il veut une ligne qui est brisée à mi-chemin et a du texte dans la section cassée, puis la ligne continue.
Dracorat

2
Il fait en fait ce que le PO demande. Vous pouvez le voir sur jsfiddle.net/88vgS
Robert Kajic

De plus, qu'est-ce qu'une ligne interrompue à mi-chemin, avec du texte à la section interrompue, sinon deux lignes avec du texte entre elles?
Robert Kajic

Vous devriez y jeter des balises TR appropriées. Je pense que c'est ce qui m'a dérouté un instant. À l'origine, je pensais que pour une raison quelconque, c'était sur trois lignes, pas sur trois colonnes. Un balisage correct ne m'aurait probablement pas fait voir les choses de cette façon. Quoi qu'il en soit, c'est certainement une solution viable.
Dracorat

1
Mais cela utilise des tables, c'est un NON ADMIS! Oh, je plaisante. Les GRID ont leur place, presque tous les autres frameworks XML GUI le reconnaissent et les utilisent partout (par exemple WPF / XAML). Merci pour la solution mate! Cela mérite plus de 3 votes positifs. Je soupçonne que l'aversion des gens pour les tables détestées sera un obstacle.
Nicholas Petersen

10

METTRE À JOUR: Cela ne fonctionnera pas en utilisant HTML5

Au lieu de cela, consultez cette question pour plus de techniques: Défi CSS, puis-je le faire sans introduire plus de HTML?


J'avais l'habitude line-height:0de créer l'effet dans l'en-tête de mon site guerilla-alumnus.com

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

Une autre bonne méthode est sur http://robots.thoughtbot.com/

Il utilise une image de fond et flotte pour obtenir un effet cool


1
J'aime ça, il a fière allure sur votre site, mais je n'ai pas pu le faire fonctionner (je soupçonne une interférence de jQuery css). :( Mais c'est vraiment cool.
Brian M. Hunt

Je pense que votre h1 pousse la portée vers le bas.
imns

1
Il s'agit d'un "hack" qui utilise les différents comportements de rendu pour DOCTYPE XTHML 1.0 Transitional. Si vous utilisez DOCTYPE html (pour HTML5), cela ne fonctionnera PAS.
Peter

6
<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>

6

Si vous pouvez utiliser CSS et souhaitez utiliser l' alignattribut obsolète , un jeu de champs / légende stylé fonctionnera:

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

Le but visé d'un ensemble de champs est de grouper logiquement les champs de formulaire. Comme l'a souligné Willoler, un text-align: centerstyle pour ne fonctionnera pas pour les legendéléments. align="center"est obsolète HTML mais il doit centrer le texte correctement dans tous les navigateurs.


Une explication plus détaillée de ce que j'allais faire.
dclowd9901

Je suis presque sûr qu'il <legend>prend les traits d'affichage d'un élément blockor inline-block, car il peut être rembourré et mariné, ce qui signifie text-align:centerque cela ne devrait pas fonctionner ...
dclowd9901

ouais les légendes sont parfaites pour la sémantique - je les utilise pour envelopper des groupes de radio mais elles sont notoirement
têtues

J'ai corrigé ma réponse. Malheureusement, en raison de l'entêtement de certains navigateurs dans le style de l' legendélément, align="center"c'est la seule solution que j'ai pu trouver qui centre de manière fiable a legend.
Trey Hunner

6

Grille de bootstrap:

HTML:

  <div class="row vertical-center">
    <div class="col-xs-5"><hr></div>
    <div class="col-xs-2" style="color: white"> Text</div>
    <div class="col-xs-5"><hr></div>
  </div>

CSS:

.vertical-center{
  display: flex;
  align-items: center;
}

1
La vertical-centerclasse n'existe plus dans bootstrap (4.3.1). Pourriez-vous mettre à jour votre réponse pour dire align-items-center?
Cameron Hudson

5

Vous pouvez simplement utiliser la position relative et définir une hauteur sur le parent

.fake-legend {
  height: 15px;
  width:100%;
  border-bottom: solid 2px #000;
  text-align: center;
  margin: 2em 0;
}
.fake-legend span {
  background: #fff;
  position: relative;
  top: 0;
  padding: 0 20px;
  line-height:30px;
}
<p class="fake-legend"><span>Or</span>
</p>


5

Voici une solution simple avec CSS uniquement, pas de trucs d'arrière-plan ...

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

HTML:

  <div class="center-separator">
    centered text
  </div>

exemple de violon: https://jsfiddle.net/0Lkj6wd3/


Grande solution réutilisable, comme une classe utilitaire.
Vignesh

3
<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

Mal hack ...


1
Je n'appellerais pas cela un hack, mais je testerais qu'il fonctionne dans tous les navigateurs que vous avez l'intention de prendre en charge.
Nick Larsen

fieldset ne veut pas être utilisé comme ça, il a été piraté en place ;-)
Dänu

3

Augmenter un poste de 2 ans, mais voici comment j'aborde ces situations en utilisant un seul élément et CSS.

​h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

Et voici un violon pour le vérifier: http://jsfiddle.net/sRhBc/ (image aléatoire de Google prise pour la frontière).

Le seul inconvénient de cette approche est qu'elle ne prend pas en charge IE7.


3

Utilisez simplement

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }

2

Woohoo mon premier post même si cela fait un an. Pour éviter les problèmes de coloration d'arrière-plan avec les wrappers, vous pouvez utiliser inline-block avec hr (personne ne l'a dit explicitement). L'alignement du texte doit être centré correctement car ce sont des éléments en ligne.

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

2

J'utilise un h1 avec une envergure au milieu.

Exemple HTML:

<h1><span>Test archief</span></h1>

Exemple CSS:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

Aussi simple que cela.


Bienvenue sur StackOverflow, Youri. Au lieu d'un span, vous pouvez envisager d'utiliser un div. Il sert le même but, sauf qu'il est naturellement un élément de bloc. :)
Nix

@Nix Block element inside element inline? Non merci, span est un bon choix
Jonathan Azulay

1
@MrAzulay h1est un élément en ligne. spanest agréable pour des trucs d'emballage, mais la raison pour laquelle je préfère un divdans ce cas, parce que Youri utiliser les CSS pour définir l' spanà display:block;. Je ne vois pas l'intérêt de transformer un élément en ligne en élément de bloc, alors qu'il existe des éléments de bloc appropriés ( div) facilement disponibles.
Nix

@Nix N'est-ce pas une chose assez courante à faire? Bien que mettre des blocs à l'intérieur en ligne soit une mauvaise pratique imo. Ceci est un bon article à ce sujet skypoetsworld.blogspot.se/2008/10/…
Jonathan Azulay

Oups, j'ai mal saisi mon dernier commentaire. Je suis d'accord que vous ne devez pas placer un bloc à l'intérieur d'un élément en ligne, mais qu'il h1s'agit en fait d'un élément BLOCK. Désolé pour la confusion. Pourtant, je ne vois pas l'intérêt d'en faire un spanélément de bloc, mais assez juste.
Nix

2

En regardant ci-dessus, j'ai modifié pour:

CSS

.divider {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align:center;
    text-transform: uppercase;
}
.divider span {
    position:relative;
}
.divider span:before, .divider span:after {
    border-top: 2px solid #000;
    content:"";
    position: absolute;
    top: 15px;
    right: 10em;
    bottom: 0;
    width: 80%;
}
.divider span:after {
    position: absolute;
    top: 15px;
    left:10em;
    right:0;
    bottom: 0;
}

HTML

<div class="divider">
    <span>This is your title</span></div>

Semble bien fonctionner.


2

Prendre la solution de @ kajic et mettre le style en CSS:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

Ensuite CSS (mais cela dépend de CSS3 dans l'utilisation du nième sélecteur):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

À votre santé.

(PS Sur tbody et tr, Chrome, IE et Firefox insère au moins automatiquement un tbody et tr, c'est pourquoi mon échantillon, comme @ kajic, ne les incluait pas afin de raccourcir les choses dans le balisage html nécessaire. Cette solution a été testé avec les dernières versions d'IE, Chrome et Firefox, à partir de 2013).


2

PAGE DEMO

HTML

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }

2

Cela a fonctionné pour moi et ne nécessite pas de couleur d'arrière-plan derrière le texte pour masquer une ligne de bordure, utilise plutôt la balise hr réelle. Vous pouvez jouer avec les largeurs pour obtenir différentes tailles de lignes hr.

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>

2

J'ai fait un violon qui utilise FlexBox et vous donnera également différents styles de FC (double ligne, symboles au centre de la ligne, ombre portée, encart, pointillé, etc.).

CSS

button {
    padding: 8px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 2px;
  }

  button:hover {
    cursor: pointer;
  }

  button.active {
    background-color: rgb(34, 179, 247);
    color: #fff;
  }

  .codeBlock {
    display: none;
  }

  .htmlCode, .cssCode {
    background-color: rgba(34, 179, 247, 0.5); 
    width: 100%;
    padding: 10px;
  }

  .divider {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }

  .divider.fixed {
    width: 400px;
  }

  .divider > label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }

  .divider > hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #666;
  }

  .divider.left > label {
    order: 1;
    padding-right: 5px;
  }

  .divider.left > hr {
    order: 2
  }

  .divider.right > label {
    padding-left: 5px;
  }
  /* hr bars with centered text */
  /* first HR in a centered version */

  .divider.center >:first-child {
    margin-right: 5px;
  }
  /* second HR in a centered version */

  .divider.center >:last-child {
    margin-left: 5px;
  }
  /** HR style variations **/

  hr.gradient {
    background: transparent;
    background-image: linear-gradient(to right, #f00, #333, #f00);
  }

  hr.gradient2 {
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  hr.dashed {
    background: transparent;
    border: 0;
    border-top: 1px dashed #666;
  }

  hr.dropshadow {
    background: transparent;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
  }

  hr.blur {
    background: transparent;
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
  }

  hr.blur:after {
    background: transparent;
    /* Not really supposed to work, but does */
    content: "\00a0";
    /* Prevent margin collapse */
  }

  hr.inset {
    background: transparent;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  hr.flared {
    background: transparent;
    overflow: visible;
    /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
  }

  hr.flared:before {
    background: transparent;
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
  }

  hr.double {
    background: transparent;
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
  }

  hr.double:after {
    background: transparent;
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
  }

HTML

<div class="divider left">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p>&nbsp;</p>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center fixed">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>

Ou voici un violon interactif: http://jsfiddle.net/mpyszenj/439/


2

Vous pouvez essayer de faire un fieldset, et aligner l'élément "légende" (votre texte "section suivante") au milieu du champ avec seulement border-topset. Je ne sais pas comment une légende est positionnée en fonction de l'élément fieldset. J'imagine que ça pourrait être simplemargin: 0px auto à faire, cependant.

exemple :

<fieldset>
      <legend>Title</legend>
</fieldset>

1

Vous pouvez accomplir cela sans <hr />. Sémantiquement, la conception doit être faite avec les moyens de CSS, dans ce cas c'est tout à fait possible.

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

1

Il y a toujours le bon vieux FIELDSET

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

Les ensembles de champs ne doivent être utilisés qu'avec des formulaires.
tehlivi

1

html

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

css

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}

0

Vous pouvez créer un bloc wrapper avec une image d'arrière-plan appropriée (et également définir une couleur d'arrière-plan pour votre bloc de texte centré).


0

CSS

.Divider {
width: 100%; height: 30px;  text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}

HTML

<div class="Divider">
    <div class="Side"><hr></div>
    <div class="Middle"><span>OR</span></div>
    <div class="Side"><hr></div>
</div>

Vous pouvez modifier la largeur dans la classe "côté" et "milieu" en fonction de la longueur de votre texte dans la balise "span". Assurez-vous que la largeur du "milieu" plus 2 fois la largeur du "côté" égale à 100%.


0

Fond transparent et réactif, hauteur et style de séparateur variables, position variable du texte, distance réglable entre le séparateur et le texte. Peut également être appliqué plusieurs fois avec différents sélecteurs pour plusieurs styles de séparateur dans le même projet.
SCSS ci-dessous.

Balisage (HTML):

<div class="divider" text-position="right">Divider</div>

CSS :

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 5px dotted #ccc;
  margin: 0 1rem;
}

.divider:before {
  margin-left: 0;
}

.divider:after {
  margin-right: 0;
}

.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
  content: none;
}

Sans text-positionelle, par défaut, au centre.

Démo:

Et SCSS , pour le modifier rapidement:

$divider-selector    : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding     : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width   : 100%;

#{$divider-selector} {
    display: flex;
    align-items: center;
    padding: 0 $divider-padding;
    max-width: $divider-max-width;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: '';
        flex: 0 1 100%;
        border-bottom: $divider-border-width $divider-border-style $divider-border-color;
        margin: 0 $divider-padding;
        transform: translateY(#{$divider-border-width} / 2)
    }

    &:before {
        margin-left: 0;
    }

    &:after {
        margin-right: 0;
    }

    &[text-position="right"]:after,
    &[text-position="left"]:before {
        content: none;
    }
}

jouer du violon ici .


Bonjour, j'apprécie vraiment votre extrait de code. Si je mets un texte avec un séparateur autre que l'anglais (dans mon cas, le coréen), les textes coupent la ligne toutes les deux lettres. Pourriez-vous comprendre pourquoi?
cadenzah

0

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}
<div>
   <hr> <span class="orSpan">OR</span>
</div>

Vous devrez peut-être ajuster la propriété margin

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.