How can this line be reached behind the text?

Question

Hey!

I want to create an effect like in the image above. The width of these lines should be dynamic, so they are adjusted to the text in the middle. I tried it with a table:

<table> <tr> <td><hr /></td> <td><p>The 20th of</p></td> <td><hr /></td> </tr> </table> 

But lines do not just fill the space as I expected. How can i fix this? Is there a better approach than using a table?

Edit: just noticed a typo in the image. Please just ignore it.

Answer 1

The easiest way is probably to make the line a background image, and then add another HTML element in front of it to contain the text:

 <div class='linebehind'> <span class='text'>The 20th of</span> </div> <style> .linebehind { background: url('imageWithLine.gif') repeat-x; text-align: center; } .text { display: inline-block; background: white; /* or whatever colour the background of the line image is */ padding: 0 5px; } </style> 

Note: this code is probably not perfect, but it should be more or less what you are looking for, a little tweak.