Resizable кнопки с изображением

Question

Я хочу, чтобы создать кнопку, как этот:

, но больше, изменяемые и правильно функционировать на начальной загрузке.

Вот что я сделал до сих пор:

Я попытался с display: inline-block; на download-btn-icon и download-btn-text я хотел центрирование .fa с помощью http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/, но на .fa дисплеев выхода из download-btn.

Это HTML:

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
    <div class="download-btn"> 
     <div class="download-btn-icon"> 
      <i class="fa fa-cloud-download fa-3x"></i> 
     </div> 
     <div class="download-btn-text"> 
      <h3>Download Client</h3> 
      <h5>Get the latest full updated client.</h5> 
     </div> 
    </div> 
</div> 

и это меньше:

.download-btn { 
    width: 100%; 
    height: 70px; 
    background-color: #000; 

    .download-btn-icon { 
    display: inline-block; 
    float: left; 
    width: 25%; 
    height: 100%; 
    border-right: 1px solid #fff; 

    .fa{ 
     padding-top: 14px; 
     padding-left: 23px; 
    } 
    } 

    .download-btn-text { 
    display: inline-block; 
    width: 75%; 
    float: right; 
    padding-left: 15px; 
    } 
} 

Я невежественный я не знаю, как выравнивать дивы правильно, мне нужно несколько советов.

Answer 1

Для достижения этой цели вы можете использовать display: table-cell и vertical-align: middle. Это решает проблему выравнивания и заставляет оба элемента иметь одинаковую высоту.

h3, h5 { 
 
    margin: 0; 
 
    line-height: 1.5em; 
 
} 
 
.download-btn-icon, 
 
.download-btn-text { 
 
    display: table-cell; 
 
    background: #222; 
 
    vertical-align: middle; 
 
    padding: 7.5px 15px; 
 
    color: #999; 
 
} 
 
.download-btn-icon { 
 
    border-right: 1px solid #444; 
 
}

<div class="download-btn"> 
 
    <div class="download-btn-icon"> 
 
     <i class="fa fa-cloud-download fa-3x"></i> 
 
    </div> 
 
    <div class="download-btn-text"> 
 
     <h3>Download Client</h3> 
 
     <h5>Get the latest full updated client.</h5> 
 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">