链接中的中心文本为块

Question

我开始向你展示我在图像中的问题：

所以我想为滑块做一个设计，现在我想为下一个和上一个做按钮。 图像中的黄色内容是与display：block的链接。我需要做什么，使文本（这些箭头是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;

}

Answer 1

由于你有一个固定的高度，你可以使用上边距将箭头向下推到垂直中心。

text-align:center应使箭头水平居中。

将line-height等于元素的height垂直居中。

Answer 2

我知道答案已被接受，但我只是提供一种替代方法和一种应该在动态高度上工作的方法。

我不确定箭头是仅在<a href=#">&larr;</a>内还是在<a href=#"><span>&larr;</span></a>内。当它们不在span中时，应该添加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();
});​

你去吧。 ：）