CSS：将文本与显示内联块的元素对齐答案

【问题标题】：CSS: Align text to an element with display inline-blockCSS：将文本与显示内联块的元素对齐
【发布时间】：2013-10-04 06:35:23
【问题描述】：

我有一个简短的文本，我必须在其旁边放置一个链接。链接不应以文本形式显示，而应以图像形式显示。到目前为止没有问题，但是要使用图像，我必须设置 display:inline-block 才能设置标签的宽度/高度。一旦我这样做，从右边开始的下一个在包含的 div 中向下跳跃。我绝对无法向上移动它。代码是：

<div>
    <p id="pid">Some prefixing text that shouldn't be at the bottom of the div but rather in the middle <a href="#" target="_blank">This is some link</a></p>
</div>

#pid {
    border: 1px solid blue;
    float: right;
}
#pid a {
    display: inline-block;
    width: 50px;
    height: 53px;
}

http://jsfiddle.net/DxVQr/1/

那么我怎样才能将前缀文本向上移动呢？非常感谢！

【问题讨论】：

您说“链接不应以文本形式显示，而应以图像形式显示。”但是你有文字吗？？
我有文字来证明我在说什么。示例中不需要图像，因为它的行为完全相同。
您可以将inline-block 元素的vertical-align 设置为middle，以便它相对于相邻的inline 元素居中对齐：jsfiddle.net/DxVQr/2 虽然链接类型会被剪裁，但因为链接的height 设置得太小。
我知道我正在改变一些东西，但是你想要像..jsfiddle.net/UDCRS这样的东西吗？？
@Fygo 如果我将此作为解决方案怎么办？ jsfiddle.net/UDCRS/1

标签： html css alignment vertical-alignment

【解决方案1】：

<a> 标记上的 vertical-align: middle 是否有效？

【讨论】：

对于紧急解决方案来说还不错。有什么方法可以更精确地对齐它吗？图片会有阴影，所以文字需要达到图片高度的 25%。
好吧，我实际上可以将 % 设置为垂直对齐，所以如果我将其设置为负数，它应该会成功...
然后用负边距或者position: relative拉出来。