我正在尝试使徽标文本居中。.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
也是硬编码的