Vertically center multi-lined text in div with a tag

Question

I am working on a menu system which consists of div's (width: 275px, height: 75px, border: 1px solid) among each other. I want the whole div to be clickable, which I do with an a tag and display:block property (see code below). Some of the menu entries are multi-lined text, but I can't align them vertically. The basic code is:

.div {   
    width: 275px;
    height: 75px;
    border: 1px solid #000; 
    text-align: center;
    float: right;
}

<div class="div">
    <a style="display: block; width: 100%; height: 100%" href="#">link..</a>
</div>

I have tried the following:

1. line-height: 75px: that doesn't work with multi-lined text
2. display: table and vertical-align: middle does not work with the 100% width and height of the -tag.

I have really tried a lot other code with wrapper div's, tables, ... but with no success. Otherwise, I do not want to make use of javascript (onclick="location.href").

Thanks!

Answer 1

You can do it with what you've already tried: 'display:table-cell; vertical-align: middle;', you just have to set the height to 75px instead of 100%.