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

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

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

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


@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;