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

Question

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

但更大，可调整大小并在 bootstrap.

上正常运行

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

我已经尝试在 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，我需要一些建议。

Answer 1

您可以使用display: table-cell and 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">

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

Resizable button with an image

html

css

less

twitter-bootstrap