Ajouter le texte centré au milieu d'un <hr/>-comme ligne de
Je me demande quelles sont les options que l'on a en xhtml 1.0 strict de créer une ligne sur les deux côtés de texte comme celui-donc:
Section ----------------------- La section suivante ----------------------- Section deux
J'ai pensé à faire quelques choses de fantaisie comme ceci:
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
Ou encore, parce que le ci-dessus a des problèmes avec l'alignement (à la fois verticale et horizontale):
<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>
Ce qui a aussi des problèmes d'alignement, qui-je le résoudre avec ce gâchis:
<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 se sentent "fudgy", et je serais bien obligé si vous arrivé à avoir vu ça avant, et savoir d'une solution élégante.
- Voici un autre thread avec un no-extra tags défi et une solution! stackoverflow.com/questions/12648513/...
- stackoverflow.com/questions/5214127/... est encore la meilleure solution.
- Une réponse utile ici employer Grille CSS.
- Ajouté réponse (SCSS) qui transforme presque n'importe quel élément dans un diviseur sans arrière-plan et permet de définir: la couleur et le style de trait (solide, en pointillés, tirets) de la cloison, la position du texte (gauche, droite, centre), ainsi que la classe à laquelle s'applique le présent (par défaut
.divider
). - Compte tenu de courant flexbox soutien je pense que ma réponse pourrait acquérir une certaine visibilité.
Vous devez vous connecter pour publier un commentaire.
Je ne sais pas si cela a été compris, mais flexbox propose une solution:
Voir http://jsfiddle.net/MatTheCat/Laut6zyc/ pour la démo.
Aujourd'hui, la compatibilité est pas mal (vous pouvez ajouter tous les vieux flexbox syntaxes) et qu'il ne se dégrade gracieusement.
Comment sur:
HTML:
Découvrez ce JSFiddle.
Vous pouvez utiliser
vw
ou%
afin de répondre.font-size
.La façon de résoudre ce problème sans en connaître la largeur et la couleur de fond est la suivante:
Structure
CSS
Exemple: http://jsfiddle.net/z8Hnz/
Double ligne
Pour créer une ligne double, utilisez l'une des options suivantes:
1) Fixe l'espace entre les lignes
Exemple: http://jsfiddle.net/z8Hnz/103/
2) Personnalisé l'espace entre les lignes
Exemple: http://jsfiddle.net/z8Hnz/105/
SASS (SCSS) version
Basé sur cette solution, j'ai ajouté SCSS "avec la couleur de la propriété" si ça peut aider quelqu'un...
exemple d'utilisation :
text-align: center;
pour que cela fonctionneoverflow: hidden
pour le parent et le tour est joué, contraint barré de lignes.Vous pouvez accomplir cela avec ::before et ::after sans connaître la largeur du conteneur ou de la couleur d'arrière-plan, et d'atteindre plus que le style des sauts de ligne. Par exemple, ce qui peut être modifié à faire des double-lignes, les lignes en pointillés, etc.
JSFiddle
CSS, et HTML utilisation:
CSS:
HTML:
Essayez ceci:
CSS:
HTML:
Aperçu en direct sur jsFiddle.
.divider hr
largeur dépend de combien de temps le texte est. Suggestion:.divider
et.divider hr
largeurs doivent être précisés dansem
unités. Pour obtenirhr
largeur, de l'utilisation (.divider
largeur de moins # de caractères) / 2 .Je viens de tomber sur le même problème, voici un moyen de le résoudre:
Il fonctionne sans réglage de l'arrière-plan sur l'élément de texte, c'est à dire qu'il aura l'air bien, peu importe ce que l'arrière-plan est derrière elle.
Vous pouvez l'essayer ici: http://jsfiddle.net/88vgS/
Mise à JOUR: Cela ne fonctionne pas à l'aide de HTML5
Au lieu de cela, découvrez cette question pour plus d'techniques: CSS défi, puis-je le faire sans introduire plus de HTML?
J'ai utilisé
line-height:0
afin de créer un effet dans l'en-tête de mon site guerilla-alumnus.comUne autre bonne méthode est sur http://robots.thoughtbot.com/
Il utilise une image de fond et les flotteurs pour obtenir un super effet
Si vous pouvez utiliser les CSS et sont prêts à utiliser le obsolète
align
attribut, un style fieldset/legend fonctionne:La destination d'un fieldset est de regrouper logiquement des champs de formulaire. Comme willoler l'a souligné, un
text-align: center
style pour ne fonctionnera pas pour leslegend
éléments.align="center"
est obsolète en HTML mais il faut centrer le texte correctement dans tous les navigateurs.<legend>
prend sur l'écran les traits d'unblock
ouinline-block
élément, comme on peut le collier de et de marges, ce qui signifietext-align:center
ne devrait pas fonctionner...legend
élément,align="center"
est la seule solution que j'ai pu trouver de manière fiable que les centres alegend
.Vous pouvez simplement utiliser la position relative et de définir une hauteur sur le parent
CSS:
HTML:
Bootstrap grille:
HTML:
CSS:
vertical-center
de classe n'existe plus dans le bootstrap (4.3.1). Pourriez vous s'il vous plaît mettre à jour votre réponse-à-direalign-items-center
?Heres une solution simple avec css, pas de fond de trucs...
HTML:
exemple de violon: https://jsfiddle.net/0Lkj6wd3/
Mal de bidouille ...
Cogner jusqu'à 2 ans post, mais voici comment je m'approche de ces situations à l'aide d'un seul élément et CSS.
Et voici un violon pour le vérifier: http://jsfiddle.net/sRhBc/ (image aléatoire à partir de Google prises pour la frontière).
Le seul inconvénient de cette approche est qu'elle ne prend pas en charge IE7.
Woohoo mon premier post, même si c'est d'un an. Pour éviter l'arrière-plan coloration des problèmes avec les wrappers, vous pouvez utiliser inline-block avec les ressources humaines (personne n'a dit explicitement). Text-align devrait center correctement, car ils sont des éléments inline.
- Je utiliser un
h1
avec un span dans le milieu.Exemple de code HTML:
CSS Exemple:
Simple que cela.
span
, vous pourriez envisager d'utiliser undiv
. Il sert à la même chose, sauf qu'il est naturellement un élément de type block. 🙂span
est agréable pour envelopper les choses, mais la raison pour laquelle je préfère undiv
dans ce cas, c'est parce que Youri utiliser les CSS pour définir laspan
àdisplay:block;
. Je ne vois pas le point d'en faire un élément intégré dans un élément de type block, quand il y a des éléments de bloc (div
) facilement accessibles.h1
est en fait un élément de type BLOCK. Désolé pour la confusion. Pourtant, je ne vois pas l'intérêt de faire unspan
dans un élément de type block, mais juste assez.La recherche ci-dessus, j'ai modifié à l':
CSS
HTML
Semble bien fonctionner.
Prenant @kajic de la solution et de mettre le style dans le CSS:
Puis CSS (mais cela dépend de CSS3 en utilisant nième sélecteur):
Acclamations.
(P. S. Sur tbody tr, Chrome, IE et Firefox au moins insère automatiquement une tbody tr, c'est pourquoi mon exemple, comme @kajic, de ne pas les inclure de manière à garder les choses plus courte dans le besoin de balisage html. Cette solution a été testé avec les dernières versions de IE, Chrome et Firefox, 2013).
PAGE
HTML
CSS
Cela a fonctionné pour moi et ne nécessite pas de couleur de fond derrière le texte pour masquer une ligne de frontière, à la place utilise la balise hr. Vous pouvez jouer avec la largeur pour obtenir différentes tailles de rh lignes.
Suffit D'Utiliser
J'ai fait un violon qui utilise FlexBox et vous donnera également différents styles de RH (double ligne, les symboles dans le centre de la ligne, ombre portée, en médaillon, en pointillés, etc).
CSS
HTML
Ou voici interactif Violon: http://jsfiddle.net/mpyszenj/439/
Vous pourriez essayer de faire un
fieldset
, et l'alignement de la "légende" élément ("votre prochaine section" text) pour le milieu du terrain avec seulementborder-top
ensemble. Je ne suis pas sûr de savoir comment une légende est positionné conformément à l'élément fieldset. J'imagine que c'est peut-être juste un simplemargin: 0px auto
de faire le tour, si.exemple :
Vous pouvez accomplir cela sans
<hr />
. Sémantiquement, la conception doit être fait avec les moyens du CSS, dans ce cas, il est tout à fait possible.Il y a toujours le bon vieux jeu de champs
Vous pouvez créer un wrapper bloc avec un arrière-plan de l'image (et aussi de mettre un peu de fond de la couleur de votre texte centré bloc).
CSS
HTML
Vous pouvez modifier la largeur dans la catégorie "côte" et "moyen", basé sur la longueur de votre texte dans la balise "span". Assurez-vous que la largeur de la "middle" plus de 2 fois la largeur de la "face" est égal à 100%.
Sensible, fond transparent, hauteur variable et le style de diviseur, à position variable de texte, distance réglable entre le diviseur et le texte. Peut également être appliqué plusieurs fois avec des sélecteurs pour plusieurs diviseur de styles dans un même projet.
SCSS ci-dessous.
Balisage (HTML):
CSS:
Sans
text-position
la valeur par défaut est centre.Démo:
CSS:
HTML:
Et SCSS, de les modifier rapidement:
violon ici.
CSS:
HTML: