Expand my Community achievements bar.

SOLVED

In AEM, Inside RTE how can we make the bullet points and it's text center align.

Avatar

Level 1

swarnago_0-1688586193008.png

Text gets center align but not the bullet point.

Below is the code from source editor.

<ul>
<li style="text-align: center;">text</li>
<li style="text-align: center;">text 2</li>
<li style="text-align: center;">text 3</li>
</ul>

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @swarnago - 

 

  • You can create a CSS class like below, this can be applied to the unordered list (<ul>) within the RTE. This class will handle the center alignment of the bullet points and text.  

 

.centered-bullets {
  list-style-position: inside;
  text-align: center;
}
​

 

  • Within the RTE configuration, locate the option to add custom CSS classes or styles. Add the CSS class centered-bullets to the appropriate field or option. This will apply the CSS class to the unordered list within the RTE.

 

<styles>centered-bullets</styles>

 

View solution in original post

2 Replies

Avatar

Community Advisor

It looks like ootb you cannot center the list but only the text individually as you mentioned, you can either add a custom style to achieve this or you can add a hyphen in the text as a workaround and drop the usage of the list element, something like this:

Esteban666_0-1688590576986.png

 



  



Esteban Bustamante

Avatar

Correct answer by
Community Advisor

Hello @swarnago - 

 

  • You can create a CSS class like below, this can be applied to the unordered list (<ul>) within the RTE. This class will handle the center alignment of the bullet points and text.  

 

.centered-bullets {
  list-style-position: inside;
  text-align: center;
}
​

 

  • Within the RTE configuration, locate the option to add custom CSS classes or styles. Add the CSS class centered-bullets to the appropriate field or option. This will apply the CSS class to the unordered list within the RTE.

 

<styles>centered-bullets</styles>