Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 22, 2017 at 2:21 pm #736955
    dweddell

    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 #736960
    Basilis

    Hi 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!
    Basilis

    January 23, 2017 at 1:06 pm #737222
    dweddell

    Hi 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 #737337
    Vinay

    Hi,

    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,
    Vinay

    January 25, 2017 at 12:47 pm #738298
    dweddell

    Hi

    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 #738379
    Vinay

    Hey!

    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!
    Vinay

    January 25, 2017 at 3:26 pm #738408
    dweddell

    ok, thanks

    what css would you use for using images rather than icons?

    kind regards

    Duncan

    January 27, 2017 at 6:11 am #739211
    Vinay

    Hey!

    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, 10 months ago by Vinay.
    January 28, 2017 at 12:48 pm #739705
    dweddell

    Thanks

    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 #739840
    Vinay

    Hi,

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘position icon list in center of column’ is closed to new replies.