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.