Archive for July, 2017

Proportional box:

.box {
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
}

16:9 ⇔ 9/16=0.5625 ⇒ 0.5625*100=56.25%

Vertical alignment 1:

<div class="valign">
    <div class="valign-inner">
       Vertically aligned content.
    </div>
</div>

.valign {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.valign-inner {
    display: table-cell;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

Vertical alignment 2:

.valign {
    display: flex;
    align-items: center;
    justify-content: center;
}

.valign-inner {
    flex: 1;
}

Proportional box with background image and vertically centered content:

<div class="box" style="background-image: url('path/to/image');">
    <div class="box-inner">
        <div class="valign">
            <div class="valign-inner">
               Vertically aligned content.
            </div>
        </div>
    </div>
</div>

.box {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.box-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

.valign {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.valign-inner {
    display: table-cell;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}