This text is aligned to the bottom, no matter what the height of the image is.
Flag Object Bottom
HTML
<div class="dt mw6 center pv4 pv5-m pv6-ns">
<div class="dtc v-btm">
<img src="http://tachyons.io/img/super-wide.jpg" alt="A bright blue sky" class="mw5 db" />
</div>
<div class="dtc v-btm pl3">
<p class="lh-copy mv0">
This text is aligned to the bottom, no matter what the height of the image is.
</p>
</div>
</div>
css
.db {
display: block;
}
.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;
}
.mv0 {
margin-top: 0;
margin-bottom: 0;
}
.center {
margin-right: auto;
margin-left: auto;
}
.v-btm {
vertical-align: bottom;
}
@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
- 278B
- Selectors
- 13
- Declarations
- 18
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