How to center a list on the page, but keep each item left aligned within the list?

Support
#1

Hello. I have a short list that I would like to center inside a Visual Composer element. But I would like each item in that list to have the same left margin (as in this screenshot). How can I achieve that? The closest I can get is this. As you can see, the list items are centered on the page, but not aligned with respect to each other.

The text in-question resides in a Visual Composer ‘Text’ element.

If you would like admin access to my site, I can grant it.

Thanks.

#2

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#3

The URL in-question is: http://www.tidessamui.com/restaurant/ The section in-question is entitled ‘OUR MENU & RECOMMENDATIONS,’ and is towards the bottom of the page.

Let me know if you need admin access.

Thanks.

#4

Hi There,

See this: https://screencast-o-matic.com/watch/cbQh2VI1Pr
Paragraph tag is a block. We have to center the entire p tag so everything inside will move accordingly. You see I add the following:

    max-width: 22%; margin: 0 auto;

The border is just to show you how it move. We can add that directly on the p tag but it will not be responsive. On smaller screen like mobile, 22% max width is too small and will result to squeeze content. Now we have to add inside a media query instead. On your p tag add a class like center-content like below:
<p class="center-content">
No need to add align left because by default text is aligned left.
Then add this CSS:

@media (min-width: 980px){
  .center-content{
      max-width: 22%; 
      margin: 0 auto;
}
}

Hope this helps.

#5

Great, thanks very much–that worked. We can consider this resolved.

#6

You’re most welcome.