WebToolkit

CSS vertical align

Overview  

In HTML td tag has an attribute named "valign" which can align content vertically. CSS doesnt have such an attribute, so you need to do some magic to achieve such a result. CSS vertical align. Using method described below you will be able to align an element vertically in any height container.

CSS vertical align demo page
View the demo page for this article

Source code for index.html   (Download source code)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>DEMO: CSS vertical align</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        .v-outer {
            display: table;
            #position: relative;
            overflow: hidden;
            height: 100px;
            background: black;
            color: white;
            width: 100%;
        }

            .v-middle {
                display: table-cell;
                #position: absolute;
                #top: 50%;
                vertical-align: middle;
            }

                .v-inner {
                    #position: relative;
                    #top: -50%;
                }
    </style>
</head>

<body>

    <div class="border v-outer">
    <div class="v-middle">
    <div class="v-inner">
    ...content...
    </div>
    </div>
    </div>

</body>
</html>