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

I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem

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

Demo: http://jsfiddle.net/a5hP3/

演示：http：//jsfiddle.net/a5hP3/

Here's code anyway:

无论如何这里是代码：

HTML:

HTML：

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

CSS:

CSS：

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

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

5 个解决方案

#1

You can set the line-height equal to the height:

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

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

http://jsfiddle.net/a5hP3/3

http://jsfiddle.net/a5hP3/3

#2

There are two solutions:

有两种解决方案：

First you can set the line-height of your div equal to its height. Unfortunately for this, you need to remember to update the line-height whenever you change the div's height dimension.

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

Another solution is to place your text within a div that's styled to be displayed as a table-cell with a vertical alignement. This would be similar to placing your text within a table and setting the vertical alignment on its cells:

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

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

#3

SEE DEMO

看看演示

---

CSS:

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 */
}

#4

Make the line-height the same as the container height...

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

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

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

Note: This solution only works when there is one line of text.

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

#5

This is a problem better handled by javascript. (I'm using jQuery here): http://jsfiddle.net/a5hP3/15/

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