Заголовок 1 между двумя изображениями

Мне нужно сделать H1 с изображениями с обеих сторон.

Он должен быть на одной линии и должен быть отзывчивым.

Подобно этому, но ==== представляет собой изображение небольшой строки:

========= ТЕКСТ HEADER ============

Текущий код:

<h2> of WATCHES & MEN </h2>

Есть идеи? Заранее спасибо!

1 ответ

Имеются изображения и заголовок h1, установленные как встроенные блоки: http://jsfiddle.net/

HTML:

<h2>of WATCHES & MEN</h2>

CSS:

#image-surround { display: inline-block;
}

h1 { display: inline-block;
}

Конечно, вам нужно иметь контейнер для всех, чтобы он был правильно реагировать. http://jsfiddle.net/qn8dnvmg/4/

HTML:

<div>
 <div>
 
 </div>
 <div>
 <h2>of WATCHES & MEN</h2> 
 </div>
 <div>
 
 </div>
</div>

CSS:

.container { position: relative; 
margin: 0 auto; 
padding: 0; 
width: 960px;
padding-left: 10px;
padding-right: 10px;
}

.container .column, .container .columns { float: left; 
display: inline; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 2px;
padding-right: 2px;
}

.row { margin-bottom: 20px; 
}

.clear { clear: both;
height: 1px;
width: 100%;
}

.container .onehalf.columns { width: 50%; }
.container .full.columns { width: 100%; }

.container .onethird.columns { width: 33.33%; }
.container .twothirds.columns { width: 66.66%; }

.container .onequarter.columns { width: 25%; }
.container .twoquarters.columns { width: 50%; }
.container .threequarters.columns { width: 75%; }

.container .onefifth.columns { width: 20%; }
.container .twofifths.columns { width: 40%; }
.container .threefifths.columns { width: 60%; }
.container .fourfifths.columns { width: 80%; }

.container .oneeight.columns { width: 12.5%; }
.container .twoeights.columns { width: 25%; }
.container .threeeights.columns { width: 37.5%; }
.container .foureights.columns { width: 50%; }
.container .fiveeights.columns { width: 62.5%; }
.container .sixeights.columns { width: 75%; }
.container .seventeights.columns { width: 87.5%; }

.container .onetenth.columns { width: 10%; }
.container .twotenths.columns { width: 20%; }
.container .threetenths.columns { width: 30%; }
.container .fourtenths.columns { width: 40%; }
.container .fivetenths.columns { width: 50%; }
.container .sixtenths.columns { width: 60%; }
.container .seventhtenths.columns { width: 70%; }
.container .eighttenths.columns { width: 80%; }
.container .ninetenths.columns { width: 90%; }

А затем ваши медиа-запросы и т.д.

licensed under cc by-sa 3.0 with attribution.