如何将锚标记与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

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

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

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

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

我认为最好的方法是设置更多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;  
}

DEMO