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