Align

  View in Github

Mostly used for centering and some assume a flex parent.

.l-align-center-x
Uses auto side margin for horizontal center
<div style="border:2px solid black; width: 200px; height: 100px; position: relative; " >
  <div style="width: 50%;" class="has-padding has-bg-yellow l-align-center-x">Example</div>
</div>
.l-align-center-y
Absolutely positioned for vertical vertical center
<div style="border:2px solid black; width: 200px; height: 100px; position: relative; " >
  <div style="width: 50%;" class="has-padding has-bg-yellow l-align-center-y">Example</div>
</div>

Parent is position: relative
RepoCountLocation(s)
donations 2
List
texastribune 1
List
.l-align-center-self
Used on children of flex or grid parent for vertical center
<div style="border:2px solid black; width: 200px; height: 100px; position: relative; display: flex" >
  <div style="width: 50%;" class="has-padding has-bg-yellow l-align-center-self">Example</div>
</div>
Parent is display: flex
.l-align-end-self
Used on children of flex or grid parent for forcing bottom alignment
<div style="border:2px solid black; width: 200px; height: 100px; position: relative; display: flex" >
  <div style="width: 50%;" class="has-padding has-bg-yellow l-align-end-self">Example</div>
</div>
Parent is display: flex
.l-align-center-children
Apply to parent to center children. Centers x and y.
<div style="border:2px solid black; width: 200px; height: 100px; position: relative; " class="l-align-center-children">
  <div style="width: 50%;" class="has-padding has-bg-yellow l-align-center-children">Example</div>
</div>