Как можно достичь этой строки за текстом?

The effect I'm talking about Как можно достичь этой строки за текстом?

Привет!

Я хочу создать эффект, как на изображении выше. Ширина этих строк должна быть динамической, поэтому они корректируются к тексту в середине. Я попробовал это со столом:

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

Но линии не просто заполняют пространство, как я ожидал. Как я могу это исправить? Есть ли лучший подход, чем использование таблицы?

Редактировать: Просто заметили опечатку на изображении. Пожалуйста, просто проигнорируйте это.

источник

2013-02-20 dislick

Возможный дубликат [css техника для горизонтальной линии со словами в середине] (http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in- the-middle) и http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line – j08691

Этот комментарий имеет идеальное решение для моего случая: http : //stackoverflow.com/a/14731123/1309907 – dislick

Самый простой способ, вероятно, чтобы сделать линию фоновое изображение, а затем положить другой HTML элемент перед ним, чтобы содержать текст:

<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>

Примечание: этот код, вероятно, не является совершенным, но это должно быть более или менее то, что вы ищете, немного подстраиваясь.

источник

2013-02-20 17:19:05 DiMono

Пробовал это тоже, но у меня много фонов, я не могу просто установить его в цвет. Спасибо, в любом случае! – dislick

Как можно достичь этой строки за текстом?

ответ

Смежные вопросы