Question

我编写了以下程序来从数据库获取通知并显示它。情况是在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>

输出是这样的。

enter image description here

.note的css是：

.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调试器的输出是：

enter image description here

您可以看到两个边距均为100px，而不是相对分配。

我读了this。但是不知道如何将它与我的问题联系起来

解决方案here似乎非常长。

有人可以告诉我哪里错了吗？提前谢谢。

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

Answer 1

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

Demo

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 Demo

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;
}

Answer 2

将内部div的位置设置为绝对值，将top设置为50％。使用位置和顶部，左侧属性进行游戏，以确保您的定位正确。如果有帮助，请尝试将父div的位置作为亲戚。

Answer 3

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);

Answer 4

.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/

在Div中垂直居中Div

4 个答案: