By: Eduardo Ppnce de Leon
2020-03-31


KAS Documentation / KAS Front End Documentation /

How to align center columns or remove sapces around inline-block like a float

By: Eduardo Ppnce de Leon
2020-03-31

How to align center columns  or remove sapces around inline-block like a float
When using aCenter on a parent that has columns, if the columns are inline-col they will not touch each other, behave as floatLeft but you can align them center, right or left.

Use the class inline-col available in bootstrapXP.css


<div class="inline-col"> Some text or image </div>

<div class="inline-col"> Some text or image </div>

 

Both will be next to each other wthout the spacing that occures when doing display:inline-block  

When used with columns you can center 2 or more columns that are not using 100% the witdth. You only need to wrap them and align center from the wrapper, DO NOT FLOAT. aCenter aligns Center, also available in bootstrapXP.css

 

<section class="aCenter">

<div class="inline-col col-2 col-mob-6"> Some text or image </div>

<div class="inline-col col-2 col-mob-6"> Some text or image </div>

<div class="inline-col col-2 col-mob-6"> Some text or image </div>

</section>

 

In this example the 3 columns will be perfectly aligned in the middle all behaving as columns

Comments