jquery lavalamp 메뉴의 가운데 이미지

Question

이미지를 가운데에 배치하는 데 문제가 있습니다. U는 메뉴 여기서 화살표 이동가 본대로 ADRESS은

http://burger-laden.de/preview/

이다. 이제 내 문제는 화살표가 항상 텍스트의 가운데에 있어야한다는 것입니다. 여기에 코드 : CSS

이 여기에 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); 

덕분에

.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; 
} 

이

Answer 1

나는 이것을 알고 늦게이다 , 그러나 귀하의 사이트에 lly는 이것을 찾는데 도움을 주었고, 나는 지금 일하고있는 나의 새로운 포트폴리오 사이트에 이것을 사용하고있다. "중심"모양을 얻으려면 다음을 변경하십시오.

.lavaLampBottomStyle의 li.back {
--- 배경 : 홈페이지 (../ 이미지/menu_top_arrow.png) 노 - 반복;
--- 배경 위치 : 왼쪽 중심 0px;
--- margin-top : 33px;
--- margin-left : 20px;
--- 높이 : 46px;
--- 너비 : 자동;
--- z- 색인 : 8;
--- 위치 : 절대;

너비가 자동으로 설정 되었기 때문에 li 요소는 호버링하는 너비와 같기 때문에 간단한 가운데 배치 된 배경 위치가 작업을 수행합니다.