ITL utility_classes

ITL utility_classes

Source: _layout.scss, line 202

4.5.1 Center

  • .m-auto@child - absolute centering
  • .m0-auto@child - horizontal centering (block in block)
  • .center@parent - horizontal centering (inline in block)
  • .flex-center@parent - centers everything

Example

<div class="wp100 h200 bg-red flex-center">
 <div class="bg-white w16 h16"></div>
</div>
<div class="w200 h200 bg-blue relative inline-block">
 <div class="bg-red absolute absolute--fill m-auto w16 h16"></div>
</div>
<div class="w200 h200 bg-blue relative inline-block" style="overflow: auto">
 <div class="bg-red w16 hp100 m0-auto"></div>
</div>