1

我编写了以下程序来从数据库中获取通知并显示它。情况是显示div里面div.note 垂直居中。

我试过了vertical-align: middle，vertical-align: center但都失败了。我发现它们是用于表格单元格的。所以我选择了这个。

<?php
include("../common/config.php");
$query = "SELECT content FROM st_notifications";
$result = mysqli_query($dbc, $query) or die(mysqli_error($dbc));
while($row = mysqli_fetch_row($result))
{
    echo "<div class='note'><div style='word-wrap: break-word;'>".$row[0]."</div></div>";
}
?>
<script>
    $(function () {
        $(".note").each(function () {
            var note = $(this);
            var diff = 100 - ($("div", note).outerHeight() / 2);
            $("div", note).css({ 'margin-top': diff >= 0 ? diff : 0 });
        });
    });
</script>

输出是这样的。

在此处输入图像描述

的CSS.note是：

.note {
    height: 200px;
    width: 500px;
    margin: 25px auto 0px auto;
    background-color: #fff;
    padding: 10px;
    vertical-align: baseline;
    background-image: url(../images/notebg.png);
    background-size: 100% 100%;
}

Chrome 调试器的输出是：

在此处输入图像描述

您可以看到两个边距都不100px是相对分配的。

我读了这个。但不知道如何将其与我的问题联系起来

这里的解决方案似乎非常长。

有人能告诉我哪里错了吗？提前致谢。

PS：我通过直接调用元素并使用 each() 函数来尝试使用 jQuery，两者都给出了相同的结果。Chrome 中没有关于 JavaScript 或 PHP 的调试错误。

4

4 回答 4

3

用于display: table-cell;对齐嵌套的 div 垂直居中

演示

HTML

<div class="wrapper"><div class="inner">This is vertically centered</div></div>

CSS

div.wrapper {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    width: 300px;
    background-color: #ff0000;
    text-align: center;
}

div.inner {
    display: inline-block; /* This is optional */
}

如果div是固定的

方式 2演示

HTML

<div class="container"><div class="float">This will work with fixed dimensions</div></div>

CSS

.container {
    width: 500px;
    height: 300px;
    background: #eee;
    position: relative;
}

.float {
    position: absolute;
    height: 50px;
    width: 150px;
    left: 50%;
    top: 50%;
    margin-left: -75px; /* Half Of Width */
    margin-top: -25px; /* Half Of Height */
    border: 1px solid #aaa;
}
于 2012-12-24T14:02:03.933 回答
2

将内部 div 的位置设置为绝对，顶部设置为 50%。使用 position 和 top,left 属性来获得正确的定位。如果有帮助，请尝试将您的父 div 的位置设为相对位置。

于 2012-12-24T14:08:07.290 回答
0

JQUERY 解决方案

我正在使用我某天创建的这个功能：

/**
 * Permits to center an element vertically in its parent
 * The div to center must exist before calling this function
 * @param : element => div to center
 * @param : offset => offset to apply
 * @param : parent => center into a parent, by default, window size is used
 */
function centerDivVertically(element,offset,parent)
{
    parent = parent || null;

    var myOffset = (offset != null) ? offset : 0;
    var height = window.innerHeight ? window.innerHeight : $(window).height();

    //Align to the parent
    if(parent != null)
        height = $(parent).height();

    var elementHeight = height - $(element).height();
    $(element).css('top',(elementHeight/2)+myOffset + 'px');    
}

//Usage
centerDivVertically('#myDiv',0,null);
于 2012-12-24T14:01:30.053 回答
0 
.outer {
    width: Xpx;
    height: Ypx;
    border: 1px solid red;
}
.inner {
    width: 50%;
    height: 50%;
    background: blue;
    margin: 0 auto;
    margin-top: 25%;
}

演示： http: //jsfiddle.net/maniator/tUX5Z/ ​</p>

于 2012-12-24T14:03:48.133 回答