center-vertical

This lesson demonstrate how to center an inline(-block) element with a given container - horizontally and vertically.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div class="outer">
            <div class="inner">
                <img src="kanguru.jpg"/> 
            </div>
        </div>

        <div class="outer">
            <div class="inner">
                <span> Hello world</span>
            </div>
        </div>
    </body>
</html>

Stylesheet

@import url("../styles/a5.css");

.outer {
    display: table;
    height: 10cm;
    margin: 0 auto;
    width: 10cm;
}

img {
    max-width: 8cm;
}

.inner {
    background: #f2f2f2;
    padding: 40px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}