Question

I’ve been trying to figure this out for quite some time, and it seems to be very close to working, but it just won’t align vertically. I’ve tried the most of the solutions out, while going back to the same table-cell answer. It doesn’t work here though, the text gets aligned right at the top. Does anyone know why this doesn’t work, as well as a fix for it?

jsfiddle:

http://jsfiddle.net/JyvbJ/

HTML:

<a href="#">Open Up</a>​

CSS:

a {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 240px;
    border-radius: 120px;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    -khtml-border-radius: 120px;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
}

a:hover {
    color: #000;
    text-decoration: none;
    background-color: rgba(0,0,0,0.8);
    opacity: 1;
    display: block;
}​

How it looks like (LEFT: NORMAL | RIGHT: HOVER):

P.S I can’t have any divs because I want the entire circle to be clickable as the link. Thanks

Answer 1

position: absolute doesn’t mix with display: table-cell. Remove that and the display: block in the :hover rules and it works. Fiddle