liser/src/modules/vertical-align.css

functional css help to optimizing design work and building responsive websites

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