Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

AEM 6.x - How to automatically center div content

Avatar

Level 3

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>

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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;

}

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

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;

}