我想设置警报框的高度,我尝试如下:
@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>
如何在文本框中间设置文字?
答案 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的信用,我对这项技术印象非常深刻,非常棒!