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-xoverflow-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 回答