Tutorials Infos - Anleitungen - Hilfe - Dreamcodes
 

vertical align

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.
 
Script:
<!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>

 
ID: 1487
eingestellt am: 29.10.2007
Autor: Na
Status zum lesen: Gast
gelesen: 4309
Webseite: www.dreamcodes.com
[Drucken]