将文本中间与位置对齐：绝对答案

【问题标题】：align text middle with position: absolute将文本中间与位置对齐：绝对
【发布时间】：2013-08-30 00:59:42
【问题描述】：

我正在使用 jRumble 一个 jquery 插件来使我的文本抖动。

我希望它在悬停时激活，但前提是您悬停文本（而不是 div！）所以，我使用 position: absolute;

因为我使用position:absolute;，所以我的文本左对齐，而不是中间对齐！

没有绝对的： http://jsfiddle.net/UxS6y/

绝对： http://jsfiddle.net/UxS6y/1/

【问题讨论】：

标签： jquery css absolute

【解决方案1】：

我查看了小提琴，如果您进行以下更改，它应该可以工作：

/* In style sheet */
.center {
    text-align:center;
}

#cv {
    /* add this on top of what is there*/
    display:inline-block;
}

/* remove the absolute */
<div class="center"> 
    <span id="cv">CV</span>
</div>

Updated fiddle

【讨论】：

完美！我在右侧有另一段文字，同样的问题，我只是用我假设的权利替换中心？
是的，作为一般规则（一个非常一般的规则），添加一个外部容器来控制对齐，然后有一个内部可交互元素，在这种情况下是悬停按钮。所以是的 text-align right 会起作用。如果我的回答有帮助，请不要忘记投票/标记正确：D
嘿，我已将图像添加到 div。文本与图像一起下降到 div 的底部。如何解决这个问题？
你能把它加到小提琴里吗？
很抱歉打扰您，我在第二次查看代码后自己修复了它。（我更改了您最初发布的内容。）

【解决方案2】：

尝试使用 left 将 div 移动到屏幕中心

#absolute {
    position: absolute;
    left: 50%;
    margin-left: -11px;/*half the width of the div*/
}

【讨论】：

就像一个魅力，唯一的问题是它移动到底部多一点（嗯？）

【解决方案3】：

包含的 div 需要指定的绝对宽度，因为它不会占据整个屏幕。因此，如果您将其 (#absolute) 设置为 width:100%;它应该工作。

【讨论】：

它现在居中对齐 + 可以悬停在整个 div 而不仅仅是文本上。