Question

基本上我正在尝试做的是使一个锚链接（包含一个箭头）以div为中心。

我尝试仅使用箭头（在附加的照片中）复制列。
通过仅使用 inline-block和height: 100%;来填充{{ 1}}。我在垂直居中div方面遇到了问题。

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

我希望我能以清楚的方式陈述问题。

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

猜猜我还不准发布照片。

这是照片：
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

但是，如果元素的高度因任何原因而改变，则值stil在那里，并且你的角色可以是不可见的......（你可以尝试使用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;  
}

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

2 个答案:

DEMO