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

Question

基本上我想做的是使锚链接（包含箭头）以div为中心。

我试图复制带有箭头的列（在附图中）。
通过仅使用 inline-block和height: 100%;来填充div. 我在>垂直居中时遇到问题。

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

我希望我清楚地说明了这个问题。

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

猜猜我还不允许发布照片。

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

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

Answer 1

要在没有任何其他元素的情况下执行此操作，您可以在链接上应用 line-height 样式。

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

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

但是，如果元素的高度因任何原因发生变化，该值仍然存在，并且您的角色可能是不可见的......（您可以尝试使用第一个小提琴来更改结果窗口的高度）

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

Answer 2

如果您inline-block不需要任何其他文本，则可以向其添加填充，以便跨度保持在中心

HTML

<div>
    <span><a href="">&gt;</a></span>
</div>

CSS

div{
    display: inline-block;
    background: #60D3E8;
    padding: 50px 60px; 
}

span {
    font: bold 50px/50px 'source code pro', sans-serif;
}

a {
    color: white;
    text-decoration: none;  
}

演示