Question

我为客户端制作了一个用于图像拼接的悬停信息框。当人徘徊图像（不同的方向，因此其灵活的大小）时，他会在其上方获得另一个div的信息。灵活性是问题：我希望div的内容垂直和水平居中。目前它看起来像这样：

.linkbox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1.9em;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

但我希望这些东西出现在盒子中间。所以我的第一个想法是：padding-top:40%;和高度（可能！？）50％，其余部分用于信息。我知道我必须以％表示这个大小，但那只是粗略的。你有什么想法吗？

项目在这里：http://www.davidgoltz.de/2011/archive/

Answer 1

这是我发现垂直居中/对齐内容的最佳指南：

http://phrogz.net/css/vertical-align/index.html

从指南中，您可以使用以下CSS：

<span style="display:inline-block; vertical-align:middle">Your content</span>

Answer 2

您可以看一下：链接 http://jsfiddle.net/qfXVa/2/

div.linkbox {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    display: table;
    vertical-align: middle;
}

div.linkbox div {
    display: table-cell;
    vertical-align: middle;
}

我基本上为文本内容设置了一个容器，并将其垂直和水平中间对齐到父级。

Answer 3

要将文字置于div的中间位置，我发现以下效果最佳：

.center
{
    margin: auto;
}

您也可以使用：

text-align: center;
vertical-align: middle;

Answer 4

查看this blog post中描述的方法。

我会尝试vertical-align:middle或寻求此解决方案：

<div id="top">
<h1>Title</h1>
</div>
<div id="floater"></div>
<div id="content">
Content Here        
</div>

#floater    {float:left; height:50%; margin-bottom:-120px;}
#top    {float:right; width:100%; text-align:center;}</strong>
#content    {clear:both; height:240px; position:relative;}

Answer 5

这个适合我 -

HTML：

<a style="display: block;" class="fancybox linkbox-709 linkbox" href="http://www.davidgoltz.de/2011/wp-content/uploads/2011/08/black-forest.jpg">
<div id="wrapperC" style="display: table; height: 100%; vertical-align: middle;">
    <div id="cell" style="display: table-cell; vertical-align: middle;">
        <div class="content">
            <span class="datum">Aug 8th</span>
            <h1 class="post-title-archive">Black Forest</h1>
        </div>
    </div>
</div>

CSS：

.wrapperC {
    display: table;
    height: 100%;
    vertical-align: middle;
}

.wrapperC {
    display: table-cell;
    vertical-align: middle;
}

带有（垂直和水平）居中文本的悬停框

5 个答案: