修复警报框的高度定义

时间:2015-02-12 19:38:03

标签: html css twitter-bootstrap twitter-bootstrap-3

我想设置警报框的高度,我尝试如下:

  @alert-box: 60px;

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

结果我得到了 enter image description here

在图片上可以看到,第二个方框上的文字不在框的中间。和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>

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

1 个答案:

答案 0 :(得分:2)

这并不容易 - 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的信用,我对这项技术印象非常深刻,非常棒!