In AEM, Inside RTE how can we make the bullet points and it's text center align. | Community
Skip to main content
swarnago
July 5, 2023
Solved

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

  • July 5, 2023
  • 2 replies
  • 1359 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Tanika02

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>

 

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
July 5, 2023

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:

 



  

Esteban Bustamante
Tanika02
Tanika02Accepted solution
Level 7
July 6, 2023

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>