For desktop, this text is vertically aligned middle, no matter what the height of the image is. On mobile, this is a paragraph below an image.
Flag Object Collapse
HTML
<div class="dt mw6 center pt0 pb5 pv5-m pv6-ns">
<div class="db dtc-ns v-mid-ns">
<img src="http://tachyons.io/img/super-wide.jpg" alt="A bright blue sky" class="w-100 mw7 w5-ns" />
</div>
<div class="db dtc-ns v-mid ph2 pr0-ns pl3-ns">
<p class="lh-copy">
For desktop, this text is vertically aligned middle, no matter what the height of the image is.
On mobile, this is a paragraph below an image.
</p>
</div>
</div>
css
.db {
display: block;
}
.dt {
display: table;
}
.lh-copy {
line-height: 1.5;
}
.mw6 {
max-width: 32rem;
}
.mw7 {
max-width: 48rem;
}
.w-100 {
width: 100%;
}
.pb5 {
padding-bottom: 4rem;
}
.pt0 {
padding-top: 0;
}
.ph2 {
padding-left: .5rem;
padding-right: .5rem;
}
.center {
margin-right: auto;
margin-left: auto;
}
.v-mid {
vertical-align: middle;
}
@media screen and (min-width: 30em) {
.dtc-ns {
display: table-cell;
}
.w5-ns {
width: 16rem;
}
.pl3-ns {
padding-left: 1rem;
}
.pr0-ns {
padding-right: 0;
}
.pv6-ns {
padding-top: 8rem;
padding-bottom: 8rem;
}
.v-mid-ns {
vertical-align: middle;
}
}
@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
- 335B
- Selectors
- 18
- Declarations
- 22
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-display tachyons-line-height tachyons-max-widths tachyons-widths tachyons-spacing tachyons-utilities tachyons-vertical-align