Vertical centering

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
Weasyprint  ERROR
improper box heights compared to other output
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

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;
    break-after: page;
}

img {
    max-width: 8cm;
}

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