html - 链接中的中心文本作为块

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<a href=#">&larr;</a>内还是在 span 内<a href=#"><span>&larr;</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;
});

现在，当您使用动态/流体布局时，这将无法正常工作，因为顶部值只计算一次。每次调整窗口大小时，我们都需要重新计算该值。看看这里。

// 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();
});​

给你。:)