centering vertically text in a div

Question

I have this div which contains some text inside a square. I want the text inside to be shown right in the middle of it - it seems that the bottom of my text is in the middle, while I would like the middle of my text to be in the middle.

My css is:

.touch {
border-radius: 3px;
background: #eee4da;
text-align: center;
font-weight: bold;
/*z-index: 10;*/
font-size: 30px; 
width: 60px;
height: 60px;
display: inline-block;
cursor: pointer;
justify-content: center;
align-items: center;
/*vertical-align: middle;*/
}

There are several ways, one is to add `line-height: 60px;` to `.touch` if the text won't wrap and it will always fit on one line. Demo: http://jsfiddle.net/1tjr6r2q/1/ — Arbel, Nov 03 '14 at 22:01

score 1 · Accepted Answer · answered Nov 03 '14 at 22:02

You should remove height and add padding to the element. Example here.

CSS:

.touch {
    border-radius: 3px;
    background: #eee4da;
    text-align: center;
    font-weight: bold;
    font-size: 30px; 
    width: 50px;
    cursor: pointer;
    align-items: center;
    padding: 10px;
}


.grid-row {
  margin-bottom: 10px; 
}

The centering is working on multiple elements as you can see here.

score 1 · Answer 2 · answered Nov 03 '14 at 22:07

1

Add

line-height: 60px; // same as div's height

JSFiddle

answered Nov 03 '14 at 22:07

Bruno Calza

2,732
2
23
25

@Arbel - So why didn't you post it as an answer? – Alohci Nov 03 '14 at 22:13
@Arbel sorry. i didn't see it – Bruno Calza Nov 03 '14 at 22:14

score 1 · Answer 3 · edited May 23 '17 at 12:27

Based on this solution, just add "display: table-cell;"

.touch {
    border-radius: 3px;
    background: #eee4da;
    text-align: center;
    font-weight: bold;
    /*z-index: 10;*/
    font-size: 30px; 
    width: 60px;
    height: 60px;
    display: inline-block;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: table-cell;
    vertical-align: middle;
}

centering vertically text in a div

3 Answers3