текста внутри DIV не вертикально совместив

Question

jsfiddle.net/6knk8qLc/

Здравствуйте, У меня возникли проблемы с простым вертикальным выравниванием. Я хочу, чтобы текст в фиолетовом div был вертикально посередине div, не слишком близко к вершине. Я пробовал:

display: table-cell; 
vertical-align:middle; 

Это не работает. Мне что-то не хватает?

Answer 1

Создать wrapper..check это:

CSS

.category-description{ 
    width:600px; 
    height:140px; 
    background:#C6C; 
    padding: 30px; 
    display: table; 
    float:left; 
} 

.category-description div{ 
    display: table-cell; 
    vertical-align: middle; 
} 

h2{ 
    font-family:arial,verdana,helvetica,sans-serif; 
    font-size:14px; 
    color:#201c1f; 
    text-decoration:none; 
    text-transform:uppercase; 
    font-weight:bold; 
    margin:0; 
    padding: 0 0 10px 0; 
} 

p{ 
    font-family:arial,verdana,helvetica,sans-serif; 
    font-size:14px; 
    color:#333333; 
    text-decoration:none; 
    margin:0 0 0px 0; 
    padding:0 0 0 0px; 
} 

HTML

<div class="category-description"> 
    <div> 
     <h2>Retrospex Adept</h2> 
     <p>Retail Price: £79.99</p> 
     <p>Wholesale Price: Contact Us</p> 
     <p>Affiliate Commission: 12.5%</p> 
     <p>In Stock: Yes</p> 
     <p><span style="padding-top:10px;display: inline-block">View More</span></p> 
    </div> 
</div> 

DEMO HERE

Answer 2

Оберните текст во внутренний div и установите display и vertical-align на THAT div, а также установите height на высоту внешнего div. См. http://jsfiddle.net/z47Lphx4/