div內文本的垂直對齊

Question

在這方面，我真的需要幫助：第二天就讓我難受。 我有以下代碼：

* {
margin: 0;
padding: 0;
font: 16px Verdana, Arial, sans-serif;
color: #444;
line-height: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}

.inlbtn {
width: 2rem;
height: 2rem;
display: table;
text-align: center;
font-weight: bold;
color: #666;
border: 1px solid #939393;
}

.plus {
font-size: 1.5rem;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}

.plus:before {
content: "+";
}

<div class='inlbtn'><span class='plus'></span></div>

它基本上在內部具有div和span，並帶有“ +”符號。 水平對齊方式看起來不錯，但垂直方向有些下移。 如何使其在垂直方向上完美居中？

我玩過代碼，看來*下的代碼是罪魁禍首，但是為什么呢？

這是小提琴http://jsfiddle.net/jk34josq/2/

Answer 1

您做的一切正確，我始終使用相同的方法。 問題是這條線

content: "+";

是一段文字，因此它會自動在保留為大寫字母的line-height內的頂部具有邊距（並且+符號不是一個）； 頁邊距值也可以根據字體而有所不同。

作為證明，請嘗試以下操作：

content: "A";

這看起來居中。

您可以做些什么來避免這種現象：

1. 負保證金/頂級物業
2. 使用圖片代替文字
3. 也許玩降低line-height屬性，但我對此方法有疑問

Answer 2

我將只使用一個HTML元素，因為不需要使用額外的元素或:before偽類：

<div class='inlbtn'>+</div>

然后，我將使用display: inline-block ，而不是table。

正如Simon在回答中提到的， +字符小於A 但是，我不使用負邊距或填充，而是更改了行高：

.inlbtn {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: #666;
    border: 1px solid #939393;
}

更新小提琴

Answer 3

嘗試這樣： 演示

.inlbtn {
    width: 2rem;
    height: 2rem;
    display: block;
    text-align: center;
    font-weight: bold;
    color: #666;
    border: 1px solid #939393;
}
.plus {
    font-size: 1.5rem;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle !important;
}
.plus:before {
    content:"+";
    display: inline-block;
}