liser/src/modules/text-align.css

functional css help to optimizing design work and building responsive websites

.tl {
  text-align: left;
}
.tr {
  text-align: right;
}
.tc {
  text-align: center;
}
.tj {
  text-align: justify;
}

@media screen and (min-width: 30em) {
  .tl-ns {
    text-align: left;
  }
  .tr-ns {
    text-align: right;
  }
  .tc-ns {
    text-align: center;
  }
  .tj-ns {
    text-align: justify;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .tl-m {
    text-align: left;
  }
  .tr-m {
    text-align: right;
  }
  .tc-m {
    text-align: center;
  }
  .tj-m {
    text-align: justify;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .tl-ml {
    text-align: left;
  }
  .tr-ml {
    text-align: right;
  }
  .tc-ml {
    text-align: center;
  }
  .tj-ml {
    text-align: justify;
  }
}

@media screen and (min-width: 60em) {
  .tl-l {
    text-align: left;
  }
  .tr-l {
    text-align: right;
  }
  .tc-l {
    text-align: center;
  }
  .tj-l {
    text-align: justify;
  }
}