css：使文本垂直居中显示

我试图使某些文本在元素中居中显示，但似乎无法使其垂直对齐

我创建了一个JSFIDLE：箭头需要向上移动

我试过垂直对齐：中间（和顶部）

.cont{
宽度：25px；
光标：指针；
边框：实心1px灰色；
高度：12px；
边界半径：10px；
文本对齐：居中；
}
.阿罗{
字号：18px；
}
⇒

垂直对齐

仅适用于块元素。我为您设置了高度，以说明其工作原理

• 更新你的小提琴

看看这里：

使用“相对位置”向上移动对象

5px

代码

.cont {
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
     border-radius:10px;
    text-align:center;
    position: relative;
}
.arrow {
    font-size:18px;
    position: relative;
    top: -5px;
}

试试这个

.arrow {
    display: block;
    font-size: 18px;
    line-height: 10px;
}

如果要将文本设置为垂直居中，则必须在CSS中设置

行高

。这只适用于这种情况

我尝试将箭头的

行高度设置为与
.cont
的高度相同，但结果不是。。。真的对齐了，所以我必须减少2个像素使它看起来像对齐的

演示：

您可以将
垂直对齐
与
行高

.arrow {
    vertical-align: top;
    font-size:18px;
    line-height: 12px;
}

“垂直对齐”属性将使目标元素与其他内联元素对齐

到其他内联元素（应用到表格单元格时除外，在表格单元格中应用到内容）。摘自本文（建议阅读）：

现在，解决它。您有不同的方法来执行此操作：

将集装箱箱的
行高设置为其高度：

.cont{
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
    line-height: 12px;
    border-radius:10px;
    text-align:center;
}

.arrow{font-size:18px;}


将div设置为
display:table cell
，并给箭头一个
vertical align:middle
：

.cont{
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
    display: table-cell;
    border-radius:10px;
    text-align:center;
    /* vertical align applied to the contents */ 
    vertical-align: middle;
}

.arrow{
    font-size:18px; 
 }


使用绝对定位或边距来重新定位箭头
顺便说一句，注意第二个在IE7及以下版本上不起作用（请参阅）

.cont{
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
    display: table-cell;
    border-radius:10px;
    text-align:center;
    /* vertical align applied to the contents */ 
    vertical-align: middle;
}

.arrow{
    font-size:18px; 
 }