html - How can one achieve this line behind the text? -

html - How can one achieve this line behind the text? -

this question has reply here:

css technique horizontal line words in middle 12 answers

hey!

i want create effect in image above. width of lines need dynamic, adjust text in middle. tried table:

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

but lines don't fill space expected it. how can prepare this? there improve approach using table?

edit: noticed typo in image. please ignore it.

the easiest way create line background image, , set html element in front end of contain 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 background of line image */ padding: 0 5px; } </style>

note: code isn't perfect, should more or less you're looking bit of tweaking.

html css