Question

I wrote the below program to get notifications from the database and display it. The situation was to display the div inside div.note vertically centered.

I tried vertical-align: middle and vertical-align: center and both failed. I found that they are for table cell. So I opted this.

<?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>

the output was something like this.

The css of .note is:

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

The output on Chrome debugger was:

You can see that both the margins are 100px instead of being assigned relatively.

I read this. But don’t know how to relate it to my problem

And the solution here seems to be incredibly long.

Can somebody tell where I am wrong? Thanks in advance.

PS:
I tried jQuery by directly calling the element and using each() function both give the same. And there is no debugging error in Chrome regarding JavaScripts or PHP.

Answer 1

Use display: table-cell; to align the nested div vertically centered

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

If the div is fixed

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