我正在尝试为带箭头的 div 创建错误标签,但居中存在问题。
我得到的结果为:
我需要像这样的效果:
HTML:
<div class="error-label-arrow"></div>
<div class="error-label">This field is required.</div>
CSS:
div.error-label{
padding: 7px 10px 0 4px;
color: #fff;
background-color: #DA362A;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div.error-label-arrow{
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #DA362A;
float: left;
}
这可行吗?
这里有一个示例代码
vertical-align: center;
应该就能起作用了。这种方法也适用于旧版浏览器。 - Shadow The Spring Wizard