jquery lavalamp菜单上的中心图像答案

【问题标题】：center image on jquery lavalamp menujquery lavalamp菜单上的中心图像
【发布时间】：2012-06-02 09:00:48
【问题描述】：

我在图像居中时遇到问题。地址是

如您所见，有一个箭头移动的菜单。我的问题是现在我需要箭头始终位于文本的中心。代码如下：

css：

    .navigation .bottom {
    font-weight: bold;
    font-size:16px;
}

.lavaLampBottomStyle {
    position: relative;
    overflow: hidden;
    height: 46px;
}

.lavaLampBottomStyle li {
    float: left;
    list-style: none;
}

.lavaLampBottomStyle li.back {
    background: url(../images/menu_top_arrow.png) no-repeat;
    background-position: left 0px;
    margin-top: 33px;
    margin-left: 20px;
    height: 46px;
    width: auto;
    z-index: 8;
    position: absolute;
}

.lavaLampBottomStyle li a {
    text-decoration: none;
    color: white;
    outline: none;
    text-align: center;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    position: relative;
    overflow: hidden;
    float: left;
    margin: auto 0px;
}

这是html

 <ul class="lavaLampBottomStyle" id="1">
                        <li><a href="#">Startseite</a></li>
                        <li class="current"><a href="#">Speisekarte</a></li>
                        <li><a href="#">Anfahrt</a></li>
                        <li><a href="#">Kontakt</a></li>
                    </ul>

这里是lavalamp js

(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

谢谢

【问题讨论】：

标签： jquery css image center lavalamp

【解决方案1】：

我知道这已经晚了，但是您的网站实际上帮助我找到了这个，我现在正在将它用于我正在开发的新投资组合网站。要实现“居中”的外观，请更改以下内容。

.lavaLampBottomStyle li.back {
--- 背景：url(../images/menu_top_arrow.png) 不重复；
--- 背景位置：~~left~~ center 0px;
--- 上边距：33px;
--- ~~margin-left: 20px;~~
--- 高度：46 像素；
--- 宽度：自动；
--- z-index: 8;
--- 位置：绝对;
}

因为宽度设置为自动，li 元素适合它悬停的 li 的相同宽度，因此一个简单的居中背景位置就可以了。

【讨论】：