Question

我正在尝试使用此CSS边框黑客来创建三角形形状。它们起作用，但我不能让它们在容器中垂直居中。

我会使用黑色三角形实体，但它在每个字体和浏览器中看起来都不同，并且具有奇怪的线条高度并且也不是垂直居中。（如果你不能使用它们，为什么他们甚至费心去制作这些角色？）

无论如何，你可以看到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。随着行高的增加，.btn元素也继承了行高，并且在中间没有正确对齐。我已经在您的codepen中添加了一些更改，我通过在该行上发表评论已经明确了这一点。

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

垂直居中的三角形（CSS边框黑客）

1 个答案: