Простой способ вертикального выравнивания вложенного div?

Я пытаюсь вертикально выровнять несколько строк текста внутри родительского div. Ниже приведен простой пример, который должен точно объяснить, что я хочу. Кажется, это так просто, но после нескольких часов поиска я до сих пор не могу найти способ сделать это! Спасибо за любую помощь, которую вы можете предоставить.Простой способ вертикального выравнивания вложенного div?

JSFiddle

<html> 
<header> 

<style type="text/css"> 
.outer 
{ 
} 
.inner1 
{ 
    float:left; 
    width:80px; 
    height:80px; 
    background-image:url('http://www.google.com/favicon.ico'); 
    background-size:cover; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
} 
.inner2 
{ 
    float:left; 
    height:80px; 
    padding-left:10px; 
    vertical-align:middle; 
} 
.innerText 
{ 
} 
</style> 

</header> 
<body> 

<div class="outer"> 
    <div class="inner1"></div> 
    <div class="inner2"> 
     <div class="innerText">This text</div> 
     <div class="innerText">Should be centered</div> 
    </div> 
</div> 

</body> 
</html>

источник

2013-05-15 Kevin Cooper

Использование display:table-cell; вместо float:left; в вашем inner2 классе.

.inner2 { 
    height:80px; 
    padding-left:10px; 
    vertical-align:middle; 
    display:table-cell; 
}

Working jsFiddle here.

источник

2013-05-15 21:48:04 lifetimes

Спасибо, что сделал трюк! Я буду отмечать вас как можно скорее, как только это позволит мне. –

Простой способ вертикального выравнивания вложенного div?

ответ

Смежные вопросы