带有图像的可调整大小的按钮答案

【问题标题】：Resizable button with an image带有图像的可调整大小的按钮
【发布时间】：2015-07-03 00:33:10
【问题描述】：

我想创建一个这样的按钮：

但更大、可调整大小并在引导程序上正常运行。

这是我到目前为止所做的：

我已经尝试在download-btn-icon 和download-btn-text 上使用display: inline-block;，然后我想使用http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ 将.fa 居中，但.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;
  }
}

我一无所知，我不知道如何正确对齐 div，我需要一些建议。

【问题讨论】：

标签： html css twitter-bootstrap less

【解决方案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">

【讨论】：