ciser/src/_vertical-align.css

Functional CSS, help quickly build and design new UI without writing css.

/*

   VERTICAL ALIGN

   Media Query Extensions:
     -ns = not-small
     -m  = medium       -ml = mobile landscape
     -l  = large

*/

.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; }
}