Напишите между двумя границами?

Я хотел бы написать между двумя границами следующим образом:

Я попытался создать мою границу в CSS, как это, но я не знаю, как писать на этой границе:

.my_class {
 border: 2px solid;
}

Кто-нибудь имеет представление о том, как разместить текст поверх границы?

2 ответа

Вы можете сделать что-то вроде этого:

HTML

<div> 
 <span>
 Product you may like
 </span>
</div>

CSS

div {
 width: 500px;
 height: 500px;
 background-color: #fff;
 text-align: center;
 border: 2px solid black;
}
span {
 background-color: white;
 position: relative;
 top: -10px;
 padding: 0 10px;
}

Демо-версия скрипта


Добавьте текст в элемент span и установите его CSS:

span {
 display:inline-block;
 margin:-20px auto 0;
 background:white;
 padding:0 10px;
}

licensed under cc by-sa 3.0 with attribution.