alignment.html

<!DOCTYPE html>
<html>
    <head>
        <title>CSS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="./style/reset.css" />
        <link rel="stylesheet" type="text/css" href="./style/main.css" />
        <link rel="stylesheet" type="text/css" href="./style/alignment.css" />
    </head>
    <body>

        <h4 class="bold">Horizontal-align:</h4>
        <h6 class="italic m-bottom10">Text-align (center):</h6>
        <div class="t-align-center w200 bc-green inline-block m-left20">
            Lorem
        </div>

        <h6 class="italic m-bottom10 m-top20">Margin (0 auto):</h6>
        <div class="w400 bc-blue inline-block m-left20">
            <div class="m-auto w200 p10 bc-yellow">Mattis</div>
        </div>

        <h4 class="bold m-top20">Vertical-align:</h4>
        <h6 class="italic m-bottom10">Line-height:</h6>
        <div class="line-height100 bc-yellow inline-block m-left20">
            Ipsum
        </div>

        <div class="line-height100 bc-yellow w200 inline-block">
            <span class="line-height16 inline-block">
                Lorem ipsum dolor sit amet, consectetur adipiscing edivt.
            </span>
        </div>

        <h6 class="italic m-top20 m-bottom10">Line-height & vertical-align:</h6>
        <div class="bc-blue inline-block m-left20">
            Porttitor
            <img class="inline-block" src="http://lorempixel.com/200/200/" alt="lorempixel.com" />
            <span class="line-height16 w200 inline-block">
                Lorem ipsum dolor sit amet, consectetur adipiscing edivt.
            </span>
        </div>

        <h6 class="italic m-top20 m-bottom10">Padding:</h6>
        <div class="p30 bc-red inline-block m-left20">
            Eleifend
        </div>

        <h6 class="italic m-top20 m-bottom10">Table-cell & vertical-align:</h6>
        <div class="table m-left20">
            <div class="table-cell middle bc-blue-d">
                Lorem
            </div>
            <div class="table-cell middle">
                <img class="inline-block" src="http://lorempixel.com/200/200/" alt="lorempixel.com" />
            </div>
            <div class="table-cell middle bc-blue-d w200">
                Cras convaldivs scelerisque finibus. Sed ante purus, porttitor a justo eget, mattis eleifend odio.
                Donec dignissim hendrerit fringilla. Suspendisse potenti. Ut ut metus enim.
            </div>
        </div>

        <h6 class="italic m-top20 m-bottom10">Absolute & margin:</h6>
        <div class="ex-relative-margin relative bc-blue-l m-left20">
            <img class="abs" src="http://lorempixel.com/200/200/" alt="lorempixel.com" />
        </div>

        <h6 class="italic m-top20 m-bottom10">Empty float:</h6>
        <div class="ex-float relative bc-red m-left20">
            <div class="float bc-green"></div>
            <div class="content bc-blue">
                Cras convaldivs scelerisque finibus.
            </div>
        </div>

    </body>
</html>