带图像的可调整大小的按钮

Question

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

但更大，可调整大小并在bootstrap上正常运行。

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

我在display: inline-block;和download-btn-icon上使用download-btn-text进行了尝试，然后我希望使用http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ .fa来.fa，download-btn }显示出<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> 的方式。

这是html：

.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;
  }
}

这就是少了：

{{1}}

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

Answer 1

您可以使用display: table-cell和vertical-align: middle来达到此效果。这解决了对齐问题，并强制两个元素具有相同的高度。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;