Question

我有一个固定宽度和高度的盒子，我有一个链接，我想显示框中心的链接（垂直）。请看这个jsfiddle看到问题

无论如何这是代码：

HTML：

<div class="box">
    <a href="#">put it down, in center of box</a>
</div>

CSS：

.box
{
   width: 200px;
   height: 300px;
   border:1px solid green;
}

.box a{
      vertical-align:middle; //doesnt work
}

Answer 1

您可以将行高设置为等于高度：

.box
{
   width: 200px;
   height: 300px;
   border:1px solid green;
   line-height: 300px;
}

http://jsfiddle.net/a5hP3/3

Answer 2

有两种解决方案：

首先，您可以将div的行高设置为等于其高度。不幸的是，每当你改变div的高度尺寸时，你需要记住更新行高。

另一个解决方案是将文本放在div中，该div的样式显示为具有垂直对齐的表格单元格。这类似于将文本放在表格中并在其单元格上设置垂直对齐方式：

<div style="outline:#000 thin solid; display:table-cell; height:300px; width:700px; vertical-align:middle">
    Some Text
</div>

Answer 3

使线高与容器高度相同......

http://jsfiddle.net/a5hP3/1/

注意：此解决方案仅在有一行文字时才有效。

Answer 4

SEE DEMO

CSS：

.box
{
   width: 200px;
   height: 300px;
   border:1px solid green;
   position:relative;
}

.box a{
      display:block;
      position:absolute;
      top:45%;
      left:10% /* adjust based on link width */
}

Answer 5

这是一个由javascript更好地处理的问题。（我在这里使用jQuery）： http://jsfiddle.net/a5hP3/15/

在框中间显示文本（垂直）

5 个答案: