liser
Version:
functional css help to optimizing design work and building responsive websites
30 lines (28 loc) • 968 B
CSS
.v-base { vertical-align: baseline; }
.v-mid { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }
@media screen and (min-width: 30em) {
.v-base-ns { vertical-align: baseline; }
.v-mid-ns { vertical-align: middle; }
.v-top-ns { vertical-align: top; }
.v-btm-ns { vertical-align: bottom; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.v-base-m { vertical-align: baseline; }
.v-mid-m { vertical-align: middle; }
.v-top-m { vertical-align: top; }
.v-btm-m { vertical-align: bottom; }
}
@media screen and (max-width: 60em) and (orientation: landscape) {
.v-base-ml { vertical-align: baseline; }
.v-mid-ml { vertical-align: middle; }
.v-top-ml { vertical-align: top; }
.v-btm-ml { vertical-align: bottom; }
}
@media screen and (min-width: 60em) {
.v-base-l { vertical-align: baseline; }
.v-mid-l { vertical-align: middle; }
.v-top-l { vertical-align: top; }
.v-btm-l { vertical-align: bottom; }
}