Center text in link which is as block - html

Question

Ill start with showing you my problem in an image:
So i want to make a design for slider, now i want to make buttons for next and previous.
yellow things in image are links with display: block. What do i need to do, to make text ( those arrows are unicode characters ) be positioned vertically and horizontally? Considering i still want whole yellow thing be clickable as a link.
here is how yellow thing looks in 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

Since you have a fixed height you can use a top margin to push your arrows down to the vertical center.
text-align:center should center your arrow horizontally.
Set line-height equal to the height of the element to center vertically.

Answer 2

I know an answer was accepted already, but I am just giving an alternative and a method that should work on dynamic heights.
I was not sure whether the arrows were merely inside an a ← or inside a span <span>←</span>. When they are not inside a span, it should be added with jQuery.
Static width and height: 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;
});
Now, when you are using a dynamic/fluid lay-out this will not work well because the top-value is only calculated once. We need to recalculate the value every time the window is resized. Take a look 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();
});​
​There you go. :)