-
AuthorPosts
-
January 22, 2017 at 2:21 pm #736955
Hi
I wish to position an icon list in the center of a column. Tried tweaking CSS, but drawn a blank. Can you assist?
Best wishes
Duncan
January 22, 2017 at 3:32 pm #736960Hi dweddell!
Please add the following Custom CSS
.avia-icon-list-container { text-align: center !important; }
and let us know if that works out for you.
Thanks a lot
Cheers!
BasilisJanuary 23, 2017 at 1:06 pm #737222Hi Basilis
I’m look to get the entire list to center, including the list icons. Can this be done?
cheers
Duncan
January 23, 2017 at 4:59 pm #737337Hi,
We love to help you with this modification. It appears you already sorted this one out? However if you like to center the text since the icons are being added as a pseudo element the icons will not be centered. If you still like to center the icons list text please try the below css
.avia-icon-list { text-align: center!important; }
Best regards,
VinayJanuary 25, 2017 at 12:47 pm #738298Hi
Sorry to be a pain, but this is not working. Essentially, I want to center the entire icon list element in the middle of a column, rather than being aligned to the left. You’ll see code provided, is leaving icons to the left. whilst text is centered.
kind regards
Duncan
January 25, 2017 at 2:26 pm #738379Hey!
I’m sorry to say but the pseudo elements cannot be aligned in relationship with the text this is a browser limitation.
If you like to align the icons with respect to the list item text please add the icons as a image in front of the text and give it a custom classname and style them using css.
Let us know if you need any help with that.
Cheers!
VinayJanuary 25, 2017 at 3:26 pm #738408ok, thanks
what css would you use for using images rather than icons?
kind regards
Duncan
January 27, 2017 at 6:11 am #739211Hey!
The html and css code should look similar to below
HTML:
<li> <img class="tick-list" src="tick.png" alt="list item"> your list item text </li>
Once the image is inserted as a html it should work fine.
If you still have any issue add the below css in Quick CSS
.tick-list { display:inline-block!important; margin-right:10px; }
Let us know if you have any questions, we are happy to help you :)
Cheers!
Vinay- This reply was modified 7 years, 11 months ago by Vinay.
January 28, 2017 at 12:48 pm #739705Thanks
decided to create a div class for each list using fixed width and auto to center the div
thanks for your help
Duncan
January 28, 2017 at 11:36 pm #739840Hi,
Glad we could help!
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)Best regards,
Vinay -
AuthorPosts
- The topic ‘position icon list in center of column’ is closed to new replies.