Отцентрировать изображение на другом изображении
Есть раздел сайта. Этот раздел состоит из изображения размером 1926 пикселей в ширину и 565 пиксилей в высоту. Ширина сайта 1000 пикселей.
Как отцентрировать на этом изображение другое изображение или блок.?
Мой код:
<!--Главный блок сайта. Начало-->
<div class="main-block">
<div class="main-block-inside">
<div class="production"><h1>Производство видео для бизнеса, которое увеличивает продажи и генерирует новых клиентов</h1></div>
</div>
</div>
<!--Главный блок сайта. Окончание-->
/*Главный блок сайта. Начало*/
.main-block{
background: url('../img/main.jpg') repeat-x;
margin: 0 auto;
width: 1924px;
}
.main-block-inside{
height: 565px;
width: 1000px;
margin: 0 auto;
}
.production{
width: 1000px;
height: 110px;
background: #367FBE;
text-align: center;
margin: 0 auto;
position: relative; top: 35px; left: -288px;
}
h1{
color: #fff;
font: bold 36px 'Arial Narrow',Arial;
text-transform: uppercase;
padding: 12px 5px;
}
Подскажите, как побороть это?
|