4

我正在尝试使徽标文本居中。.maindiv 可能很长，并且可以在房屋悬停时显示滚动条（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：

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

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

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

4

2 回答 2

1

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

例如，

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

工作演示

希望这可以帮助。

PS：如果你想改变 的溢出（滚动）.main:hover，你可以根据你的需要进行设置，使其可见或隐藏在overflow-x或overflow-y

于 2013-11-12T06:47:27.483 回答
1

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

.logo {
   text-align: center; 

}

您的主类的宽度是 200 像素，但是当滚动条开始发挥作用时，宽度会变为 180 像素，因此徽标 div 的位置会自动更改为居中。如果你想要一个固定的标志，那么你可以做这样的事情

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

工作小提琴

OR

替代解决方案

在 main 悬停时，将宽度更改为 220px，以补偿滚动条的宽度。

替代解决方案小提琴。

.main:hover {
    overflow: auto;
    width: 220px;
}
于 2013-11-12T06:31:41.843 回答