Centering a list that uses Font Awesome icons

Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  Sebastian 2 years ago.

Author Posts

Martin_1

Hi,

I am trying to center an unordered list that uses Font Awesome icons instead of simple bullets.

I have been trying literally for hours and I can’t get it done. I can get the text to center, but not the icons.

I obviously need help :-).

Regards,

Martin


Sebastian

Hey Martin,

Sure, I’m happy to help. Please could you post a link to the page with the icons so I can inspect the CSS?

Thanks!
Sebastian


Martin_1

Hi Sebastian.

Is there any way I can send the link to you privatly?

Regards,

Martin


Sebastian

Absolutely, you can use our contact form.


Martin_1

I just send you an email :-).

Thanks for taking the time to help.


Sebastian

Hey Martin,

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.

Will my first suggestion work for you?

Cheers,
Sebastian


Martin_1

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.

As always you and Microthemer rock!

Regards,

Martin


Sebastian

You’re welcome Martin. I’m always happy to help. Feel free to come back to this thread if you change your mind about the current workaround.

Thanks,
Sebastian

You must login or register to reply to this topic.