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

【问题标题】：How can I vertically align an anchor tag with a text inside a div? using inline-block如何将锚标记与 div 内的文本垂直对齐？使用内联块
【发布时间】：2013-07-23 14:41:07
【问题描述】：

基本上我要做的是使锚链接（包含箭头）在 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/

【问题讨论】：

而不是使用实际字符。为什么不使用箭头的背景图像并将背景位置设置为元素的中心？
@user1938671，感谢您的回复。我正在尝试减少我需要使用的图像，并想了解它是如何使用没有背景图像的角色来完成的。 :D
也许这会有所帮助stackoverflow.com/questions/12686065/…
@MihaiAlex 我也尝试过这种方法，但不确定我是否正确实施。 > 仍未在 div 内垂直对齐。这是我使用的代码code
这里给出的另一个方法链接：stackoverflow.com/questions/79461/…

标签： vertical-alignment css

【解决方案1】：

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

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

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

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

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

【讨论】：

嗨，我正在考虑这样做，但那将是问题所在。但尽我所能，我想使用height: 100%; 探索inline-block 属性。而且我还注意到，当我垂直对齐> 时，它仍然保持在顶部。

【解决方案2】：

如果您的 inline-block 不需要任何其他文本，那么您可以为其添加填充，以便 span 保持在中心

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

【讨论】：

嗨@Sourabh 我有点知道这种方法，但我很想学习使用inline-block 和height: 100%; 属性的方法，让元素可以点击，就像你尝试使用display: table; 方法。似乎当我使用height: 100%; 和vertical-align: middle 时，箭头仍然在顶部，我想用箭头这个词来保持水平。我更新了小提琴给你看。 updated fiddle