#### Alignment

##### Text Alignment

top-center

center

bottom-center

left-center

right-center

top-left

top-right

bottom-left

bottom-right

center-horizantal

center-vertical

                                                    <div class="row center-thing-responsive">
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="top-center">
                                                                                <i class="ph-light ph-text-align-center"></i>

                                                                              </div>

                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">top-center</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="center">
                                                                                <i class="ph-light ph-text-align-center"></i>
                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">center</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="bottom-center">
                                                                                <i class="ph-light  ph-text-align-center"></i>

                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">bottom-center</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="left-center">
                                                                                <i class="ph-light ph-text-align-left"></i>

                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">left-center</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="right-center">
                                                                                <i class="ph-light ph-text-align-right"></i>

                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">right-center</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="top-left">
                                                                               <i class="ph-light ph-text-align-left"></i>
                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">top-left</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="top-right">
                                                                                <i class="ph-light ph-text-align-right"></i>
                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">top-right</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="bottom-left">
                                                                                <i class="ph-light ph-text-align-left"></i>
                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">bottom-left</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="bottom-right ">
                                                                                <i class="ph-light ph-text-align-right"></i>
                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">bottom-right</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="center-horizantal">
                                                                                <i class="ph-light  ph-align-center-horizontal"></i>
                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">center-horizantal</p>
                                                                          </div>
                                                                          <div class="col-4 col-md-3 col-xxl-2">
                                                                            <div class="center-thing mt-3">
                                                                              <div class="center-vertical">
                                                                                <i class="ph-light  ph-align-center-vertical"></i>
                                                                              </div>
                                                                            </div>
                                                                            <p class="f-s-16 text-center m-2">center-vertical</p>
                                                                          </div>

                                                                        </div>

##### image alignment

image-top-left

image-center

image-bottom-right

image-top-right

image-bottom-left

                    <div class="col-xl-12">
                        <div class="row">
                          <div class="col-xl-3">
                            <div class="image-center-thing">
                              <div class="image-top-left">
                                <img src="../assets/images/placeholder/05.png" alt="">
                              </div>
                          </div>
                          </div>
                          <div class="col-xl-3">
                            <div class="image-center-thing">
                              <div class="image-center">
                                <img src="../assets/images/placeholder/05.png" alt="">
                              </div>
                          </div>
                          </div>
                          <div class="col-xl-3">
                            <div class="image-center-thing">
                              <div class="image-bottom-right">
                                <img src="../assets/images/placeholder/05.png" alt="">
                              </div>
                          </div>
                          </div>
                          <div class="col-xl-3">
                            <div class="image-center-thing">
                              <div class="image-top-right">
                                <img src="../assets/images/placeholder/05.png" alt="">
                              </div>
                          </div>
                          </div>
                          <div class="col-xl-3">
                            <div class="image-center-thing mt-3">
                              <div class="image-bottom-left">
                                <img src="../assets/images/placeholder/05.png" alt="">
                              </div>
                          </div>
                          </div>
                        </div>
                      </div>