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

我有一个固定的宽度和高度的框，我有一个链接，我想显示在框中间（垂直）的链接。请参阅本的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 
}

来源

2011-09-07 mari

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

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

http://jsfiddle.net/a5hP3/3

来源

2011-09-07 19:01:33

谢谢，但是如果文字很长，就会产生问题。不可能，如果它的单行，从中间开始，如果文本变得更长，继续向上推动？ – mari

如果你想要它溢出到顶部或底部，或者留在中间，我建议你为你的div添加一个边距底部（没有边框），从而暗示当文本溢出到顶部时实际上在没有溢出到边际的情况下自我平衡。在这种情况下，您可能希望平衡margin-bottom与同一个值的填充顶部，以便在文本很少时给它一个平衡的外观。不要忘了你的div高度应该补偿填充和保证金:) – Prusprus

谢谢，不知道如果我理解正确。你可以编辑jsfiddle吗？ – mari

让行高一样的容器高度...

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

注意：此方法只在有一行文字作品。

来源

2011-09-07 19:00:39 Sparky

谢谢，但如果文本很长，它产生的问题（http://jsfiddle.net/a5hP3/7 /）。不可能，如果它的单行，从中间开始，如果文本变得更长，继续向上推动？ – mari

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

来源

2011-09-07 19:02:43 Sarfraz

这是一个PROBL他们更好地处理的JavaScript。（我在这里使用jQuery）： http://jsfiddle.net/a5hP3/15/

来源

2011-09-07 19:06:58

框高相同，但文字长度不一样。如果文本变得更长，它不能很好地工作（即总是从中间开始），如果文本变得更长，保持它向上推动？ – mari

检查新的链接 –

解决办法有两个：

首先你可以设置你的div等于其高度的行高。不幸的是，您需要记住在更改div的高度尺寸时更新线条高度。

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

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

来源

2011-09-07 19:08:35 Prusprus

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

回答

相关问题