This text is vertically aligned middle, no matter what the height of the image is.
Flag Object
HTML
<div class="dt mw6 center pv4 pv5-m pv6-ns"> <div class="dtc v-mid"> <img src="http://tachyons.io/img/super-wide.jpg" alt="A bright blue sky" class="mw5" /> </div> <div class="dtc v-mid pl3"> <p class="lh-copy"> This text is vertically aligned middle, no matter what the height of the image is. </p> </div> </div>
css
.dt { display: table; } .dtc { display: table-cell; } .lh-copy { line-height: 1.5; } .mw5 { max-width: 16rem; } .mw6 { max-width: 32rem; } .pl3 { padding-left: 1rem; } .pv4 { padding-top: 2rem; padding-bottom: 2rem; } .center { margin-right: auto; margin-left: auto; } .v-mid { vertical-align: middle; } @media screen and (min-width: 30em) { .pv6-ns { padding-top: 8rem; padding-bottom: 8rem; } } @media screen and (min-width: 30em) and (max-width: 60em) { .pv5-m { padding-top: 4rem; padding-bottom: 4rem; } }
Css stats for this component
- Gzipped Size
- 258B
- Selectors
- 11
- Declarations
- 15
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-spacing tachyons-utilities tachyons-vertical-align