修复警报框的高度定义

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，这项技术给我留下了深刻的印象，太棒了！

修复警报框的高度定义

Fix height definition for alert box

html

css

twitter-bootstrap

twitter-bootstrap-3