Question

我试图让一些文字显示在一个元素的中心，但我似乎无法将它垂直对齐。

我创建了一个jsfiddle：http://jsfiddle.net/bz8Gn/箭头需要更多地移动。

我试过vertical-align:middle（和顶部）

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

.arrow {
    font-size:18px;
}

<div class = "cont">
    <span class = "arrow">&#8658</span>
</div>

Answer 1

试试这个

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

如果要将文本设置为垂直居中，则必须在CSS中设置line-height。这仅适用于这种情况。

我尝试将箭头的line-height设置为与.cont的高度相同，但结果不是......真正对齐，所以我必须减少2个像素才能使其成为显示为对齐。

演示：http://jsfiddle.net/jlratwil/49cjg/

Answer 2

看看这里：http://jsfiddle.net/bz8Gn/5/

使用位置相对移动对象5px

<强> CODE

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

Answer 3

Your updated Fiddle

您可以将vertical-align与line-height

合并

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

Answer 4

vertical-align属性将使目标元素相对于其他内联元素对齐。

到其他内联元素（应用于表格单元格时除外，它应用于内容）。摘自本文（推荐阅读）：Understanding CSS’s vertical-align Property。

现在，解决它。您有不同的方法：

将容器框的line-height设置为等于其高度：

.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及以下版本（请参阅display :table-cell does not work in ie 7?）。

Answer 5

vertical-align仅适用于块元素。我为你设定了高度来说明它的工作原理。

更新了您的小提琴http://jsfiddle.net/bz8Gn/1/

css：使文本垂直居中显示

5 个答案: