Вертикальное центрирование H1 в пределах div для соответствия соседнему div

Question

Я пытаюсь центрировать h1 заголовок в div, чтобы появиться в центре рядом с соседним div, который содержит небольшое изображение. К сожалению, независимо от того, что я пытаюсь, h1 всегда остается на вершине div.

Вот HTML:

<header> 
    <div class="page-header"> 
     <div class="page-title-icon"></div> 
     <div class="page-title"><h1>The heading</h1></div> 
    </div> 
</header> 

и вот CSS

.page-header { 
    border:0; 
    margin: 20px 0; 
    padding-bottom: 0; 
} 

.page-title-icon { 
    display: inline-block; 
    height:60px; 
    width:60px; 
    background:url(./icons-rollovers.png); 
    background-position:-46px -829px; 
} 

.page-title { 
    display: inline-block; 
    color:#c82e3d; 
    text-transform: uppercase; 
    height:60px; 
} 

.page-title h1 { 
    line-height: 60px; 
} 

Любые идеи?

Answer 1

Не было бы лучше отказаться от избыточных дивы и сделать что-то вроде этого:

HTML:

<header> 
    <h1>The heading</h1> 
</header> 

CSS

header h1 { 
    margin:20px 0; 
    padding-bottom:0px; 
    text-transform: uppercase; 
    color:#c82e3d; 
    line-height: 60px; 
    padding-left:60px; 
    position:relative; 
} 

header h1:before{ 
    content: " "; 
    position:absolute; 
    left:0px; 
    width:60px; 
    height:60px; 
    background:url(./icons-rollovers.png) left center no-repeat; 
    background-position:-46px -829px; 
} 

Slightly simplified JSFiddle

Answer 2

Посмотрите на его http://jsfiddle.net/naVS2/2/ Надеюсь, что это поможет - трюк должен дать высоту линии 50% оберточного div.

.page-header { 
    border:0; 
    margin: 20px 0; 
    padding-bottom: 0; 
} 

.page-title-icon { 
    float:left; 
    height:60px; 
    width:60px; 
    background:url(http://jsfiddle.net/img/logo.png); 
    border:solid red; 
} 

.page-title { 
    color: #C82E3D; 
    float: left; 
    height: 60px; 
    text-transform: uppercase;} 

.page-title h1 { 
    line-height: 30px; 
} 

Answer 3

Это не окончательное решение о том, что вы после, но должно заставить вас начать работу. Попробуйте сделать что-то подобное вместо этого.

HTML:

<div class="page-header"> 
    <div class="page-title-icon"> 
     <h1>The heading</h1> 
    </div> 
</div> 

CSS:

.page-header { 
    display:inline-block; 
} 
.page-header .page-title-icon { 
    display:inline; 
    padding:0 0 0 60px; 
    background:url(./icons-rollovers.png); 
    background-position:-46px -829px; 
} 

Answer 4

Решение с использованием оригинальной наценки показано в следующем CSS:

.page-header { 
    border:0; 
    margin: 20px 0; 
    padding-bottom: 0; 
    border: 1px dotted blue; 
} 

.page-title-icon { 
    display: inline-block; 
    height:60px; 
    width:60px; 
    background:url(http://placekitten.com/100/100); 
    background-position:-46px -829px; 
    vertical-align: top; 
    border: 1px dashed blue; 
} 

.page-title { 
    display: inline-block; 
    color:#c82e3d; 
    text-transform: uppercase; 
    height:60px; 
    border: 1px dashed blue; 
} 

.page-title h1 { 
    line-height: 60px; 
    border: 1px dotted blue; 
    margin: 0; 
} 

Применить vertical-align: top к .page-title-icon elment чтобы избавиться от некоторого лишнего пробела из-за ведущей линии.

Применить margin: 0 к h1, так как поля по умолчанию для h1 создают дополнительное пространство, которое отбрасывает вертикальное выравнивание.

В противном случае у вас был ответ.

См демо по адресу: http://jsfiddle.net/audetwebdesign/LmWGm/

Примечание: я добавил границы для иллюстрации краев различных элементов, они могут быть удалены.