Useful CSS snippets

This page will be used to store random but useful CSS snippets. Align fonts in the vertical center:

    display: flex;
    align-items: center;
    justify-content: center;

Set height equal to dynamic height:

    width: 80%;
    height: 0;
    padding-bottom: 80%;

Check the screen orientation:

    @media all and (orientation:portrait) { … }
    @media all and (orientation:landscape) { … }

Vertically align text next to an image

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="/path/to/image.png">
    <span>Hello World!</span>
</div>