Ajouter du texte centré au milieu d'une ligne semblable à <hr />
Je me demande quelles sont les options disponibles dans xhtml 1.0 strict pour créer une ligne des deux côtés du texte comme ci-dessous:
Section un ----------------------- Section suivante ----------------- ------ Section deux
J'ai pensé à faire des choses fantaisistes comme celle-ci:
<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 (à la fois 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 aussi des problèmes d'alignement, que je résous avec ce désordre:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
En plus des problèmes d’alignement, les deux options sont "floues", et je vous en serais très reconnaissant si vous aviez déjà vu cela auparavant et connaissiez une solution élégante.
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 ceci JSFiddle .
Vous pouvez utiliser vw ou % pour le rendre réactif.
La façon de résoudre ce problème sans connaître la largeur et la couleur de fond 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/
SASS (version 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;
}
Vous pouvez accomplir cela avec :: before et :: after sans connaître la largeur du conteneur ou la couleur d'arrière-plan, et obtenir un meilleur style des sauts de ligne. Par exemple, cela peut être modifié pour faire des doubles lignes, des lignes en pointillés, etc.
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>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 .
Je viens de rencontrer le même problème, voici un moyen 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 d'arrière-plan sur l'élément de texte, c'est-à-dire qu'il aura fière allure quel que soit l'arrière-plan qui se trouve derrière.
Vous pouvez l'essayer ici: http://jsfiddle.net/88vgS/
Je ne sais pas si cela a été résolu, mais flexbox offre une 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 une démonstration.
Aujourd'hui, la compatibilité est pas si mal (vous pouvez ajouter toutes les anciennes syntaxes de flexbox) et elle se dégrade gracieusement.
UPDATE: Cela ne fonctionnera pas avec HTML5
Consultez plutôt cette question pour plus de techniques: CSS challenge, 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
<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
Si vous pouvez utiliser CSS et que vous êtes prêt à utiliser l'attribut obsolète align, un ensemble 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 d'un jeu de champs est de regrouper logiquement les champs de formulaire. Comme l'a souligné willoler, un style text-align: center pour ne fonctionnera pas pour les éléments legend. align="center" est obsolète en HTML, 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;
}<p class="fake-legend"><span>Or</span>
</p>Grille d'amorçage:
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;
}
<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>
Bump up 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 à 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.
<fieldset style="border:0px; border-top:1px solid black">
<legend>Test</legend>
</fieldset>
Mal bidouille ...
Heres une solution simple avec CSS seulement, pas de trucs de fond ...
.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/
J'utilise un h1 avec une étendue 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.
J'ai créé un violon qui utilise FlexBox et vous donnera également différents styles de ressources humaines (ligne double, symboles au centre de la ligne, ombre portée, encadré, 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> </p>
<div class="divider right">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider center">
<hr />
<label>Welcome!</label>
<hr />
</div>
<p> </p>
<div class="divider left fixed">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider right fixed">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider center fixed">
<hr />
<label>Welcome!</label>
<hr />
</div>
Ou voici un violon interactif: http://jsfiddle.net/mpyszenj/439/
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.
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; }
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, mais utilise 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>
Vous pouvez essayer de faire une fieldset et d’aligner l’élément "legend" (votre texte "section suivante") au milieu du champ avec uniquement border-top défini. Je ne suis pas sûr de la façon dont une légende est positionnée conformément à l'élément fieldset. J'imagine que cela pourrait bien être un simple margin: 0px auto pour faire l'affaire, cependant.
exemple :
<fieldset>
<legend>Title</legend>
</fieldset>
Prendre la solution de @ kajic et mettre le style en CSS:
<table class="tablehr">
<td><hr /></td>
<td>Text!</td>
<td><hr /></td>
</table>
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 sur tbody and tr, Chrome, IE et Firefox insère au moins automatiquement un tbody et tr, c'est pourquoi mon échantillon, comme @ kajic's, ne les incluait pas, de manière à raccourcir les choses dans le code HTML requis Cette solution a été testée avec les dernières versions de IE, Chrome et Firefox à partir de 2013).
Woohoo mon premier post même s'il est âgé d'un an. Pour éviter les problèmes de couleur de fond avec les wrappers, vous pouvez utiliser inline-block with hr (personne ne l’a dit explicitement). Text-align doit être correctement centré car il s’agit d’éléments intégrés.
<div style="text-align:center">
<hr style="display:inline-block; position:relative; top:4px; width:45%" />
New Section
<hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>
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;
}
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 accomplir ceci sans <hr />. Sémantiquement, la conception devrait se faire 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"> </div>
</div>
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 de la classe "side" et "middle" 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%.
Fond réactif et transparent, hauteur et style variables du séparateur, position variable du texte, distance ajustable entre le séparateur et le texte. Peut également être appliqué plusieurs fois avec différents sélecteurs pour plusieurs styles de séparation dans le même projet.
SCSS ci-dessous.
Markup (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-position, il est centré par défaut.
Démo:
.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;
}<span class="divider" text-position="left">Divider</span>
<h2 class="divider">Divider</h2>
<div class="divider" text-position="right">Divider</div>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;
}
}
Vous pouvez créer un bloc d'encapsulage 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é).