I can see why you were having trouble with this – the icons are floated to the left, making them display as a ‘block’ elements, which don’t respond to text-align). There are two approaches to the issue. I’m going to suggest the easy way first, which will make the text look like the screenshot I emailed to you (to keep the site private).
1. Target the list element (ul) that contains the bullet points.
2. Set the max-width to 300px and the margin-left and margin-right to auto.
That’s it! Block elements can be centered by setting left and right margins to auto. And making the list element just wide enough for the text gets around using the text-align property, which isn’t well suited to your scenario.
You could go down the route of making the span element for the tick icons and the div element for the text display:inline-block, but that approach will require a number of other tweaks to align things correctly. And the bullets will not be aligned in a straight vertical line, which might not look as neat.
Although I wanted it really centered. This does look rather good.
I think I will keep it as this. I did the same as you but didn’t set the max width :-(. #learning
Thank you for taking the time to help me with this Sebastian! I am good to go with this. If I change my mind, I might come back at a later date. But I doubt I will :-D.
