我有带图标的Bootstrap 3警报。我使用图标字体来维护图标。当警报消息长度用一行代表时,我没有问题,但是当它超出一行时,我遇到了图标对齐的问题。下面的屏幕截图说明了问题: 在与多行对齐消息之前使用伪引导警报消息
我需要什么有,在第二个框,栗色行应启动和包装盒上的水平边界和文本将是在右边结束。换句话说,随着文本行数的增加,栗色边框的高度也增加,图标垂直对齐保持在中间。
下面是HTML:
<div class="alert alert-warning">
<h4>This property contains system-sensitive properties. Do not use it unless you are well aware of their requirements and results. </h4>
</div>
这里是有关`DIV警告所有的CSS规则:
.alert-warning {
padding-left: unset;
}
.alert {
padding: 0 5px;
}
.alert-warning {
background-color: #F8AA5D;
border-color: #f7864e;
color: #795548;
}
.alert {
border: 1px solid transparent;
border-radius: 4px;
}
.alert, .thumbnail {
margin-bottom: 20px;
}
.alert-warning:before {
display: inline-block;
font-size: 320%;
font-family: fox;
text-align: center;
padding: 0 10px;
vertical-align: middle;
border-right: 5px solid;
margin: 0 10px;
.alert-warning:before {
content: "\e817";
color: #772953;
text-shadow: 0 1px 5px rgba(185,74,72,.79);
}
这是h4
CSS:
.alert h4, .alert h5 {
display: inline-block;
padding: 0;
margin: 0;
}
.alert h4 {
color: inherit;
}
.alert h4 {
margin-top: 15px!important;
}
一种可能的方案可以被宣布上'.alert h4'一个'MAX-width':https://codepen.io/anon/pen/WZYjXa – UncaughtTypeError
正如罗伯特瓦德暗示, https://codepen.io/anon/pen/eGQWwp @UncaughtTypeError – SaidbakR