0

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

我创建了一个 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>
4

5 回答 5

1

试试这个

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

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

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

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

于 2013-06-18T07:08:30.053 回答
0

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

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;
}
于 2013-06-18T07:08:00.180 回答
0

你更新的小提琴

你可以vertical-align结合line-height

.arrow {
    vertical-align: top;
    font-size:18px;
    line-height: 12px;
}
于 2013-06-18T07:09:47.107 回答
0

vertical-align 属性将导致目标元素与其他内联元素对齐。

其他内联元素（应用于表格单元格时除外，它应用于内容）。摘自这篇文章（推荐阅读）：了解 CSS 的 vertical-align 属性。

现在，来解决它。你有不同的方法来做到这一点：

  1. 设置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;}

  2. 将 div 设置为display: table-cell并给箭头 a 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; 
 }
  3. 使用绝对定位或边距重新定位箭头。

顺便说一句，请注意第二个在 IE7 及更低版本上不起作用（请参阅display :table-cell does not work in ie 7?）。

于 2013-06-18T07:13:40.683 回答
-1

vertical-align仅适用于块元素。我为你设置了高度来说明它是如何工作的。

于 2013-06-18T07:07:20.383 回答