Een horizontale lijn maken met tekst erin

[jorenman]

Weet iemand hoe je een horizontale lijn (<hr>) maakt met tekst erin?

Ik bedoel net zo als op deze website http://www.brandaiddesignco.com/

Ik heb al geprobeerd om de oplossing uit de broncode te halen, maar dat is me jammergenoeg niet gelukt.

Kan iemand mij helpen?

Bij voorbaat bedankt voor de moeite,

 

[Snorvisable]

Zoiets? http://jsfiddle.net/sqdG3/1/ :thumb:

 

[bron]

Als ik van je voorbeeld pagina uit ga...

<div class="box">
  <p class="line"> </p>
  <p><span>Dit is tekst</span></p>
</div>

body {
  background: #f00;
  font: normal 100% sans-serif;
}
.box { /*geef zelf een afmeting*/
  width: 650px;
  margin: 50px auto 0 auto;
}
.box p {
  float: left;
  width: 100%;
  line-height: 1em;
  margin-top: -0.6em;
  text-align: center;
  background: transparent;
}
.box .line { /*lijn opmaak*/
  margin: 0;
  height: 2px;
  line-height: 2px;
  background: #ddd;
}
.box span { /*tekst opmaak*/
  padding: 0 10px;
  background: #f00;
  color: #ddd;
}

 

[Snorvisable]

Dat kan ook, dan boots je een hr na

 

[bron]

Yep, want de <hr /> is de meest Not-Cross-Browser tag van html4.
Een <p> met background kleurtje geeft veel minder problemen.

 

[Snorvisable]

De hr is supported door alle main browsers, het resultaat kan wellicht ietwat verschillend zijn.

 

[bron]

het resultaat kan wellicht ietwat verschillend zijn

Dat is Not-Cross-Browser :d