html - 出现滚动条上的文本中心跳转

Question

我正在尝试使 Logo 文本居中。 .main div 可以很长，并且可以在悬停时显示滚动条 (Windows)。

但是，Text Logo 会在鼠标悬停和出现滚动条时跳转/改变其位置。如何防止这种情况？要进行测试，请缩小浏览器高度以查看有效的滚动条。

代码: http://jsfiddle.net/qhoc/tppzm/2/

HTML:

<div class="main">
    <div class="logo">
        Logo Text
    </div>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

CSS:

.main {
    position: fixed;
    width: 200px;
    background: gray;
    overflow: hidden;
    top: 0;
    bottom: 0;
}

.main:hover {
    overflow: auto;
}

.logo {
    text-align: center;
}

li {
    line-height: 40px;
}

要求:

• 我喜欢将 .logo 居中，即使使用滚动条也不改变它的位置。
• 在这种情况下最好不要使用 JS 来调整位置，也不要硬编码位置。

更新 1:

有两种我不太喜欢的选择:

1. position:absolute 会起作用，但也会弄乱我的其他东西

.logo 上的

2. width:180px 将修复它，但同样，它也是硬代码，尽管您可以争辩说 200px也被硬编码了

Answer 1

.logo 没有足够的宽度来理解它在悬停时的位置，因此要让它意识到它应该保持在中心位置，它应该继承其父级的宽度。

例如，

.logo {
    text-align: center;
    width: inherit;
}

WORKING DEMO

希望这对您有所帮助。

PS:如果你想改变.main:hover的overflow(Scroll)，你可以根据自己的需要设置它，使其可见或隐藏在 overflow-x 或 overflow-y