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:要素を直接呼び出してjQueryを試し、 each() 関数を使用しても同じ結果が得られました。また、JavaScript または PHP に関する Chrome のデバッグ エラーはありません。

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 
.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 に答える
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 に答える