中心文字這是塊

生病開始與您展示的圖像在我的問題： enter image description here 中心文字這是塊

所以我想爲滑蓋設計，現在我想讓按鈕下一個和以前。圖像中的黃色東西是與顯示：塊的鏈接。我需要做什麼，使文本（這些箭頭是Unicode字符）垂直和水平放置？考慮到我仍然希望整個黃色的東西可點擊作爲鏈接。這裏是怎麼回事黃色看起來CSS

a.prev { 
width: 40px; 
height: 270px; 
display:block; 
float:left; 
background: yellow; 
-webkit-border-top-left-radius: 5px; 
-webkit-border-bottom-left-radius: 55px; 
-moz-border-radius-topleft: 5px; 
-moz-border-radius-bottomleft: 55px; 
border-top-left-radius: 5px; 
border-bottom-left-radius: 45px;

}

來源

2012-10-18 Wish

垂直對齊（對於不同的高度）可以用jQuery完成。你想要嗎？ –

現在我很好，但你可以發佈代碼，也許它會對別人有用:) – Wish

完成。 :)希望對某人有好處。 –

~~既然你有一個固定的高度，你可以使用上邊距推你的箭下到垂直中心~~。

text-align:center應該水平居中您的箭頭。

設置line-height等於垂直居中的元素的height。

來源

2012-10-18 19:30:03 Jrod

想到了，也許有一種動態的方法可以做到。所以它適用於任何高度。邊緣頂部推動整個元素下降。填充頂部的作品，但我需要從高度減去這個值，所以它與其餘的東西排成一行。 – Wish

其實可能更適合的是'line-height'。嘗試設置'line-height'等於元素的高度。 – Jrod

覈准:)謝謝你，祝你有美好的一天。 – Wish

我知道答案已被接受，但我只是給出了一種替代方法和一種應該在動態高度上工作的方法。

我不確定箭頭是否僅僅在<a href=#">←</a>之內，或者在<a href=#"><span>←</span></a>之間。當它們不在跨度內時，應該添加jQuery。

靜態寬度和高度：FIDDLE。

// Add span-wrappers around controls 
$("a.controls").each(function() { 
    $(this.firstChild).wrap("<span></span>"); 
}); 

// Position arrows vertically 
$("a.controls > span").css("top", function() { 
    var thisH = $(this).height(), 
     parentH = $(this).parent().height(), 
     thisTop = (parentH/2) - (thisH/2); 
    return thisTop; 
});

現在，當您使用動態/流體佈局時，這將無法正常工作，因爲頂級值僅計算一次。每次調整窗口大小時，我們都需要重新計算值。看看here。

// Keep aspect ratio of div 
function slideHeight() { 
    $("#slide-container").height(function() { 
     var $this = $(this), 
      w = $this.width()/2.133; 
     return w; 
    }); 
} 
slideHeight(); 


// Add span-wrappers around controls 
$("a.controls").each(function() { 
    $(this.firstChild).wrap("<span></span>"); 
}); 


// Position arrows vertically 
function arrowPos() { 
    $("a.controls > span").css("top", function() { 
     var thisH = $(this).height(), 
      parentH = $(this).parent().height(), 
      thisTop = (parentH/2) - (thisH/2); 
     return thisTop; 
    }); 
} 
arrowPos(); 


//Execute functions on resize 
$(window).resize(function() { 
    slideHeight(); 
    arrowPos(); 
});

你走了。 :)

來源

2012-10-19 09:02:47

絕對好避免使用JavaScript，除非必要。 – samayres1992

@ samayres1992沒有其他方法可以將動態元素上的元素完美居中。 –

中心文字這是塊

回答

相關問題