Как сверстать вот такой блок?

Question

[doctorcat]

Имеется вот такой элемент на psd шаблоне.
joxi.ru/p278L5qHvEPBA7
Я нуб и не совсем понимаю каким образом это сделано, прошу помощи у профессионалов. В распоряжении только сетка бутстрап. Конкретнее я не понимаю, как сделать у текста линии по бокам и такой блок чтобы линии все совпали и казались единым целым. Мало того это ещё и должно быть адаптивным. Чтобы не изобретать велосипед, решил поинтересоваться. Как обычно действовать в таких ситуациях. Благодарю за помощь :)

Comments

[doctorcat]

https://jsfiddle.net/5wtbr26z/ - готовое решение.

Answer 1

[devstudent]

<div class="wrapper">
  <div class="inner">
  <div class="block-title">
    <p>
      наши партнеры
    </p>
  </div>
  <ul class="partners-list">
    <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
     <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
     <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
      <li class="partners-list-item">
        <span class="item-thumbnail"></span>
    </li>
  </ul>
  </div>
</div>

.wrapper {
    background-color: #fff;
    border-radius:10px;
    padding:20px;
    position: relative;
    max-width: 500px;
    clear: both;
    overflow: hidden;
}
.inner {
  position: relative;
  border:1px solid green;
  padding: 15px;
}
.block-title {
 position: relative;
 top:-25px;
 text-align: center;
}
.block-title p {
  color:green;
  text-transform: uppercase;
  display: inline;
  margin: 0 auto;
  background-color: white;
  padding: 10px;
}
.partners-list {
  width: 100%;
  position: relative;
  list-style-type: none;
  font-size:0;
  padding: 0;
  margin: 0;
}
.partners-list-item {
  display: inline-block;
  text-align: center;
  width: 15%;
  margin-right: 2%;
  min-height: 100px;
  background-color: red;
}
.partners-list-item:last-of-type{
  margin-right: 0;
}

Answer 2

[Максим Люмен]

<div class="wrapper"> 
  <section></section>
</div>

html,body{
  background:#ddd;
}
.wrapper{
  width:500px;
  height:200px;
  background:#fff;
  margin:30px auto;
  position:relative;
}
section{
  width:460px;
  height:160px;
  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-80px;
  margin-left:-230px;
  border:2px solid #ddd;
}
section:after{
  content:"";
  display:block;
  width:30px;
  height:30px;
  background:#fff;
  position:absolute;
  bottom:-15px; left:50%;
  margin-left:-10px;
  border:1px solid #ddd;
}
section:before{
  content:"";
  display:block;
  width:30px;
  height:30px;
  background:#fff;
  position:absolute;
  top:-15px; left:50%;
  margin-left:-10px;
  border:1px solid #ddd;
}

демо codepen.io/maximvelin/pen/QEEvgJ?editors=110

Answer 3

[metaf]

display: inline-block; vertical-align: middle чем не подходит?

Comments

[doctorcat]

можно показать хоть какой-то пример.

[metaf]

img {display: inline-block; vertical-align: middle;} вот вам пример.

Answer 4

[Вадим Иванов]

<div class="slider">
<h2 class="slider__title"><span class="slider__title-text">Наши партнеры</span></h2>
</div>

Сделать обертку slider с border: 1px solid #000.
Внутри будет лежать заголовок с position: absolute; text-align: center; top: -10px;
У текста background: #fff;
Заголовок встанет поверх обводки.
Типа того)

Comments

[doctorcat]

https://jsfiddle.net/ydfh3kn9/ что не так? )