html - 修复警报框的高度定义

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

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

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

最佳答案

这并不容易-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，这一技巧给我留下了深刻的印象，太棒了！