修复警报框的高度定义

Question

我想设置警报框的高度，我尝试如下：

  @alert-box: 60px;

  .alert-msg {
    height: @alert-box;
    margin: 20px 0px;
  }

结果我得到了

在图片上可以看到，第二个方框上的文字不在框的中间。和HTML部分

  <div class="col-md-5 col-md-offset-1 portfolio-item">
    <div class="alert alert-danger alert-msg" role="alert">
      <span>Lorem ipsum dolor sit amet, consectetur.</span>
    </div>
    <div class="alert alert-danger alert-msg">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
    <div class="alert alert-danger alert-msg">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
    <div class="alert alert-danger alert-msg">
      <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
    </div>
  </div>

如何在文本框中间设置文字？

Answer 1

这并不容易 - http://jsfiddle.net/77p1pw39/1/

您必须在文字周围添加<span class="centered">。

<div class="alert">
    <span class="centered">text</span>
</div>

CSS看起来像这样：

.alert {
    width: 300px;
    height: 60px;
    margin: 0 0 20px;
    background: #ccc;
}
.alert:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -5px;
}

.alert .centered {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px 0 15px;
}

致Chris Coyier的信用，我对这项技术印象非常深刻，非常棒！