J'ai cherché des solutions pour cette décoration simple et j'en ai trouvé pas mal, certaines bizarres, certaines même avec JS pour calculer la hauteur de la police et bla, bla, bla, puis j'ai lu le un sur ce post et lire un commentaire de thirtydot en parlant fieldset
et legend
et je pensais que c'était tout.
Je suis en train de remplacer ces 2 styles d'éléments, je suppose que vous pouvez copier les normes W3C pour eux et les inclure dans votre .middle-line-text
classe (ou comme vous voulez l'appeler) mais c'est ce que j'ai fait:
<fieldset class="featured-header">
<legend>Your text goes here</legend>
</fieldset>
<style>
.featured-header{
border-bottom: none;
border-left: none;
border-right: none;
text-align: center;
}
.featured-header legend{
-webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
-webkit-padding-end: 8px;
background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
font-weight: normal; /* I preffer the text to be regular instead of bold */
color: YOU_CHOOSE;
}
</style>
Voici le violon: http://jsfiddle.net/legnaleama/3t7wjpa2/
J'ai joué avec les styles de bordure et ça marche aussi sous Android;) (Testé sur kitkat 4.XX)
ÉDITER:
En suivant l'idée de Bekerov Artur, qui est également une bonne option, j'ai changé l'image .png base64 pour créer le trait avec un .SVG afin que vous puissiez effectuer le rendu dans n'importe quelle résolution et également changer la couleur de l'élément sans aucun autre logiciel impliqué :)
/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}
form
balise?