Question

我有this div，其中包含一个正方形内的文字。我希望里面的文本显示在它的中间 - 我的文本的底部似乎在中间，而我希望我的文本的中间位于中间。

我的css是：

.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;*/
}

Answer 1

您应该删除height并将padding添加到该元素。示例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; 
}

正如您所见here。

，正在处理多个元素

Answer 2

添加

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

JSFiddle

Answer 3

基于this解决方案，只需添加“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;
}

将文本垂直居中于div中

3 个答案: