Center left justified unorganized list

[dropkag]

As the title says I have a unorganized list that I would like to center on the page but keep the text and list left justified with the bullet points. Also along the same lines I’d like to center some other left justified text. Any suggestions would be greatly appreciated as all of the posts and steps I’ve tried thus far have not been successful.

Thank You.

[friech]

Hi Ken,

Thank you for writing in, please add a CLASS to your <ul> tag

e.g.

<ul class="my-list">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>

Then use that class to style your list, add this to your Page > CSS area.

ul.my-list {
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
}

That should center the list from its container but keep the left alignment.

@dropkag

I’d like to center some other left justified text

Text and Headline elements have Text Align option. Inspect your text or headline element and set the text align option to center.

Hope it helps,
Cheers!

[dropkag]

@friech

class=“my-list”

I didn’t actually have to set the text align option to center, when I did that it didn’t look right but when I set it to left justify and implemented the custom CSS is does move it over nicely. When I saved and checked it on a mobile device, it didn’t seem to work. When I checked it in the browser it didn’t look as good as when in the development testing windows. Any suggestions?

[ruenel]

Hello Ken,

You can make use of this custom css provided that your list is using the same custom my-list class.

.my-list {
  width: auto;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

We would love to know if this has worked for you. Thank you.