Question

我正在尝试将徽标文字放在中心位置。 .main div可能很长，并且可以在悬停时显示滚动条（Windows）。

然而，当鼠标悬停和滚动条出现时，文本徽标会跳转/更改其位置。怎么预防？要测试，请缩小浏览器高度以查看滚动条有效。

代码： 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：

有两种选择我不太喜欢：

position:absolute会起作用，但也搞砸了我的其他东西

width:180px

.logo会修复它，但同样，它也是硬代码，尽管你可以说200px也是硬编码的

Answer 1

您将始终遇到此问题，因为您使用的是以下代码。

.logo {
   text-align: center; 

}

主类的宽度为200px，但当滚动条进入游戏时，宽度变为180像素，因此徽标div的位置会自动更改为居中。如果你想要一个固定的标识，那么你可以做这样的事情

.logo {
/*   text-align: center; */
    margin-left:50px;    
}

WORKING FIDDLE

OR

替代解决方案

在悬停主要时将宽度更改为220px，以便补偿卷轴的宽度。

ALTERNATE SOLUTION FIDDLE.

.main:hover {
    overflow: auto;
    width: 220px;
}

滚动时出现文本中心跳转

1 个答案: