Ajouter du texte centré au milieu d'une règle horizontale

Question

Je me demande quelles sont les options dont on dispose dans le format xhtml 1.0 strict pour créer une ligne de part et d'autre d'un texte comme ceci :

Section one
----------------------- Next section -----------------------
Section two

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 encore, parce que les éléments ci-dessus présentent 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 pose également des problèmes d'alignement, que je résous avec ce désordre :

<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 donnent l'impression d'être "fudgy", et je vous serais très reconnaissant si vous aviez déjà vu ce problème et si vous connaissiez une solution élégante.

Answer 1

Pourquoi pas :

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

Regarde ça JSFiddle .

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

Answer 2

Le moyen de résoudre ce problème sans connaître la largeur et la couleur de fond est le suivant :

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

Ejemplo: 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;

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

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

---

Version de SASS (SCSS)

Sur la base de cette solution, j'ai ajouté le SCSS "avec propriété de couleur" si cela peut 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;
}

Answer 3

Essayez ç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 .

Answer 4

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>​

Il fonctionne sans définir d'arrière-plan sur l'élément de texte, c'est-à-dire qu'il sera beau quel que soit l'arrière-plan derrière lui.

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

Answer 5

UPDATE : Cela ne fonctionnera pas avec HTML5

Consultez plutôt cette question pour plus de techniques : Défi CSS, puis-je le faire sans introduire plus de HTML ?

---

Utilicé line-height:0 pour créer l'effet dans l'en-tête de mon site guérilla-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 des flotteurs pour obtenir un effet sympa.