Проблемы с центрированием изображений

Question

У меня возникают проблемы с центрированием изображений по вертикали. Я пробовал различные другие решения, размещенные на этом сайте, но они, похоже, не работают, если я не делаю что-то неправильно. Вот соответствующий CSS:

.boxes { 
    width: 145px; 
    height: 100%; 
    background-color: #fff; 
    color: #fff; 
    font-family: 'Muli', sans-serif; 
    font-size: 14px; 
    font-weight: 400; 
    line-height: 32px; 
    text-align: center; 
    display: inline-block; 
    position: relative; 
    border-radius: 10px 10px 10px 10px; 
    border: 1px solid #0081d6; 
    margin: 0 2px 12px 12px; 
     -webkit-box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81); 
-moz-box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81); 
box-shadow: 4px 4px 15px 0px rgba(0,0,0,0.81); 
} 
.boxes .heading { 
    width: 145px; 
    height: 40px; 
    color: #fff; 
    background-color: #0081d6; 
    font-family: 'Muli', sans-serif; 
    font-size: 17px; 
    font-weight: 400; 
    line-height: 20px; 
    border-radius: 10px 10px 0 0; 
    border-bottom: 4px solid #00589e; 
} 
    .boxes .heading a { 
    color: #fff; 
    font-family: 'Muli', sans-serif; 
    font-size: 17px; 
    font-weight: 400; 
} 
.boxes .image { 
    width: 145px; height: 140px; 
    background-color: #fff; 
    margin:0 auto; 
} 
.boxes .link { 
    width: 145px; 
    background-color: #0081d6; 
    height: 38px; 
    line-height: 18px; 
    border-radius: 0 0 10px 10px; 
    border-top: 4px solid #00589e; 
} 
.boxes .link a { 
    color: #fff; 
    font-family: 'Muli', sans-serif; 
    font-size: 14px; 
    font-weight: 400; 
} 

А вот HTML:

<div class="boxes"> 
<div class="heading"><a href="http://bananacomputers.co.uk/index.php?route=product/search&amp;search=CAD" target="_blank"><span>Computer Aided Design</span></a></div> 

<div class="image"> 
<p><img alt="Computer Aided Design" height="83" src="http://bananacomputers.co.uk/image/data/5810 MAIN.jpg" width="145" /></p> 
</div> 

<div class="link"><a href="http://bananacomputers.co.uk/index.php?route=product/search&amp;search=CAD" target="_blank"><span style="font-size:14px;">Dell Precision Workstations</span></a></div> 
</div> 

Любая помощь будет принята с благодарностью. Благодарю.

Answer 1

Возможным решением является использование display: table и display: table-cell. Чтобы попробовать это, добавьте это в свой существующий css:

img { 
    display: block; 
} 
.image { 
    display: table; 
} 
p { 
    display: table-cell; 
    vertical-align: middle; 
}