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:

line-height: 75px: that doesn't work with multi-lined text
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!

score 1 · Accepted Answer · answered Jul 18 '13 at 10:58

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%.

answered Jul 18 '13 at 10:58

Thomas Leu

826
4
13

The text is then not vertically centered, but at the top. See http://jsfiddle.net/GGhvk/25/ – Jan Eysermans Jul 18 '13 at 19:44
@JanEysermans Sorry, I need to clarify that you have to apply those two CSS rules to the inner a tag, not the surrounding div. (See [jsFiddle](http://jsfiddle.net/RQm2R/)) – Thomas Leu Jul 18 '13 at 21:09

score 0 · Answer 2 · answered Jul 18 '13 at 11:27

0

Use display:table-cell, to achieve vertically centred multi-lined text.

JSFiddle Demo

CSS:

div {   
    width: 300px;
    height: 200px;
    border: 1px solid #000; 
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

answered Jul 18 '13 at 11:27

Girisha C

1,922
1
12
20

That works, but I want the whole div to be clickable, not only the text. – Jan Eysermans Jul 18 '13 at 19:41

Vertically center multi-lined text in div with a tag

2 Answers2