Ajouter du texte centré au milieu d’une ligne

Je me demande quelles options on peut avoir dans xhtml 1.0 ssortingct pour créer une ligne des deux côtés du texte comme suit:

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

J’ai pensé à faire des choses fantaisistes comme ceci:



Next section

Ou encore, parce que ce qui précède a des problèmes d’alignement (à la fois vertical et horizontal):

 

Next section

Cela a aussi des problèmes d’alignement, que je résout avec ce gâchis:

 
  Next section  
   

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 et si vous connaissiez une solution élégante.

Que diriez-vous:

 
Section Title

La façon de résoudre ce problème sans connaître la largeur et la couleur de fond est la suivante:

Structure

 
Kringle

CSS

 .ssortingke { display: block; text-align: center; overflow: hidden; white-space: nowrap; } .ssortingke > span { position: relative; display: inline-block; } .ssortingke > span:before, .ssortingke > span:after { content: ""; position: absolute; top: 50%; width: 9999px; height: 1px; background: red; } .ssortingke > span:before { right: 100%; margin-right: 15px; } .ssortingke > 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

 .ssortingke > span:before, .ssortingke > 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

 .ssortingke > span:before, .ssortingke > 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 la propriété color” si cela pouvait aider quelqu’un …

 //mixins.scss @mixin bg-ssortingke($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-ssortingke($col1); color: $col1; } 

Vous pouvez accomplir ceci avec :: before et :: after sans connaître la largeur du conteneur ou de 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

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

Essaye ça:

 .divider { width:500px; text-align:center; } .divider hr { margin-left:auto; margin-right:auto; width:40%; } .left { float:left; } .right { float:right; } 
 

TEXT

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

 

Some text

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

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

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

 
Next section
.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émonstration.

Aujourd’hui, la compatibilité n’est pas si mauvaise (vous pouvez append toutes les anciennes syntaxes Flexbox) et elle se dégrade avec élégance.

MISE À JOUR: Cela ne fonctionnera pas avec 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’ai utilisé line-height:0 pour créer l’effet dans l’en-tête de mon site guerilla-alumnus.com

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

Si vous pouvez utiliser CSS et que vous souhaitez utiliser l’atsortingbut obsolète align , un fieldset / légende stylé fonctionnera:

  
First Section Section 1 Stuff
Second Section Section 2 Stuff

Le but d’un jeu de champs est de regrouper logiquement des champs de formulaire. Comme l’a souligné willoler, un style text-align: center ne fonctionnera pas pour les éléments de legend . align="center" est un HTML obsolète mais il convient de centrer le texte correctement dans tous les navigateurs.

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

Or

 
text

Grille bootstrap:

HTML:

  

Text

CSS:

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

Mal hack …

Se heurter à un post 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://soffr.miximages.com/html/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 supporte pas IE7.

Woohoo mon premier post même si c’est 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.

 

 New Section 

J’utilise un h1 avec une envergure au milieu.

Exemple HTML:

 

Test archief

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.

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

 
This is your title

Semble fonctionner correctement.

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

 

Text!

Puis CSS (mais cela dépend de CSS3 en utilisant nth selector):

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

À votre santé.

(PS On tbody et tr, Chrome, IE et Firefox au moins insèrent automatiquement un tbody et tr, ce qui explique pourquoi mon exemple, comme @ kajic, ne les a pas inclus 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).

PAGE DE DÉMO

HTML

 

Write something

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

Cela a fonctionné pour moi et ne nécessite pas de couleur de fond derrière le texte pour masquer une ligne de bordure, au lieu d’utiliser une balise hr réelle. Vous pouvez jouer avec les largeurs pour obtenir différentes tailles de lignes hr.

 

OR


Juste utiliser

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

J’ai créé un violon qui utilise FlexBox et vous donnera également différents styles de HR (double ligne, symboles au centre de la ligne, ombre scope, 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

 

 


 



 


 


 



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

Vous pouvez accomplir cela sans


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

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

Vous pouvez essayer de fieldset un ensemble de fieldset et aligner l’élément “légende” (le texte de votre “section suivante”) au milieu du champ avec uniquement border-top défini par une border-top . Je ne suis pas sûr de la façon dont une légende est positionnée en fonction de l’élément fieldset. J’imagine que ce pourrait être une simple margin: 0px auto pour faire le tour, cependant.

Exemple :

 
Title

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

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

 

OR

Vous pouvez modifier la largeur de la classe “side” et “middle” en fonction de la longueur de votre texte dans la balise “span”. Soyez sûr de la largeur du “milieu” plus 2 fois la largeur de “côté” égale à 100%.