html - 垂直居中三 Angular 形(CSS border hack)

Question

我正在尝试使用这个 CSS 边框 hack 来创建三 Angular 形。它们可以工作，但我无法让它们在容器中垂直居中。

我会使用黑色三 Angular 形实体，但它在每种字体和浏览器中看起来都不一样，而且行高很奇怪，而且也不是垂直居中的。 (如果你不能使用它们，他们为什么还要费心制作这些 Angular 色？)

无论如何你都可以看到Codepen here .

箭头 CSS:

.ico_arrow_left {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-right: 0.75em solid #CCC;
}
.ico_arrow_right {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-left: 0.75em solid #CCC;
}

其他注意事项:我不想影响任何容器的高度。只需要常青浏览器。

Answer 1

问题是由于您设置的 line-height 引起的。但是我已经编辑了你的 codepen，这是新的，我也没有删除你设置的原始 line-height。随着 line-height 的增加，.btn 元素也继承了 line-height 并且中间没有正确对齐。我已经对您的 codepen 添加了一些更改，我已通过在线评论明确说明。

http://codepen.io/anon/pen/MwBqyp