Как вставить текст посередине границы блока?

#html #css

Здравствуйте! Как сделать подобное?



Есть идея использовать рамку как background-image и поверх писать текст на html.

Есть ли какие-то еще варианты?
    

Ответы

Ответ 1

Этого можно добиться с помощью комбинации тегов 
 и 
:



legend {
  text-align: center;
}

  
Заголовок
  Текст текст текст



Ответ 2

Ну, думаю так. 

html:


    
Заголовок
    
Куча вашего текста
 



css: 

fieldset
{
    width: 910px;
    height: 294px;
}
legend
{
    padding-left: 40px; /* Свои значения */
    padding-right: 40px; /* Свои значения */
}


Ну и ваш текст и его стилистика внутри.


Ответ 3

Еще как вариант



*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  background: url('http://zellox.com/wp-content/uploads/2016/02/best-nature-background-desktop.jpg')
no-repeat center top;
  -webkit-background-size: cover;
  background-size: cover;
}

.b{  
  overflow: hidden;
  padding: 25px 0;
  max-width: 400px;
  margin: 25px auto;  
}
.b-inner{  
  border: 3px solid #fff;
  border-top: none;
  color: #fff;
  font-size: 16px;
  position: relative;
  background: rgba(0,0,0,0.3);
}

.b-text{
  padding: 25px;
}
.b-title{
  position: absolute; top: -12px; left: 0;
  width: 100%;
  text-align: center;
  font-size: 18px;
}
.b-title > span{
  position: relative;
  display: block;  
}
.b-title > span:before,
.b-title > span:after {    
    content: "";
    display: inline-block;
    background-color: #fff;
    height: 3px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
.b-title > span:before {
    right: 0.5em;
    margin-left: -50%;
}
.b-title > span:after {
    left: 0.5em;
    margin-right: -50%;
}


title text
  
 
  text text text text text text text text text text text text text text text text
text text text 
  





title text title text
  
 
  text text text text text text text text text text text text text text text text
text text text