AEM 6.x - How to automatically center div content

[antonio_f]

Dear All,

I'd like to know is there a way to solve the below need.

Given the following HTL code I'd like to render all 'aol_singlePackage' over multiple rows center them orizontally.

For example :

Assuming we have 5 elements ( 5 aol_singlePackage component )  in our ${elements.content} list I'd like to render these component over two rows,

centering them orizzontally in an automatic mode.

Thank All

Best wishes,

Antonio

HTL CODE

<div class="row">

<div data-sly-test="${properties.map}">

<div data-sly-list="${elements.content}">

<!-- index: ${itemList.index} - modulo ${elements.moduleResult} - last: ${itemList.last} -->

<div data-sly-resource="${ @path=item.pktype, resourceType='/apps/newaol/components/content/aol_singlePackage'}" data-sly-unwrap></div>

</div>

</div>

</div>

[Ankur_Khare · Accepted solution]

Add a class on this line -

<div data-sly-list="${elements.content}">

like

<div clas="testclass" data-sly-list="${elements.content}">

in your css file add below code-

.testclass {

  text-align: center;

}