vertical-alignment - 如何将 anchor 标记与 div 中的文本垂直对齐？使用内联 block

Question

基本上我想要做的是使 anchor 链接(包含箭头)在 div 中居中。

我试图仅复制带箭头的列(在所附照片中)。
仅使用 inline-block 和 height: 100%; 填充 div。我在将 > 垂直居中时遇到问题。

我知道可以使用 display: table; 和 display: table-cell; 来完成，但我仍在试验 display: inline-block ; 属性。

我希望我清楚地陈述了问题。

您还可以删除 fiddle 中的注释属性以显示我想要的结果。

我猜我还不能发布照片。

这是照片:
http://yodame.freeoda.com/images/inline-block.jpg

这是我之前正在研究的 fiddle 。
http://jsfiddle.net/nonamedesen/kVpSk/3/

Answer 1

要在没有任何其他元素的情况下做到这一点，您可以在链接上应用行高样式。

a {
color: #fff;
background-color:#e74c3c;
text-decoration: none;
padding:0 2em;
line-height:15em}

只需更改值即可使文本居中。 JSFIDDLE

但是，如果元素的高度因任何原因发生变化，该值仍然存在，并且您的 Angular 色可能不可见......(您可以尝试使用 ny first fiddle 来更改结果窗口的高度)

我认为最好的方法是设置更多的 div 并使 div 与链接居中。 这是一个例子 JSFIDDLE2