How toHow to center text vertically after the icons

If you want to center text vertically after the icons, just as I do, you need to add this in your CSS stylesheet (style.css) :

.myicons {
  vertical-align: middle;
}

Add this in your theme files :

get_cat_icon('class=myicons');

If you want to add this in sidebar.php without using the widget, you should have something like this :

if (function_exists('put_cat_icons'))
 put_cat_icons( wp_list_categories('title_li=&echo=0'),'class=myicons'));
else
 wp_list_categories('title_li=');

For the widget, put this in the parameters field :

class=myicons
Category Icons Widget

Category Icons Widget

Please, please, use Firebug to test your CSS settings.

17 thoughts on “How to center text vertically after the icons

  1. How do you apply this css to sidebar.php without using the widget? Where would i put the above code in the below?…

    if (function_exists(‘put_cat_icons’))
    put_cat_icons( wp_list_categories(‘show_count=1&title_li=’.'&echo=0′));
    else
    wp_list_categories(‘show_count=1&title_li=’);

    Thanks

    Will

  2. Thanks for your swift reply sub.

    I couldn’t get the above example to work. But fluked my way to this slight ajustment which works for me…

    if (function_exists(‘put_cat_icons’))
    put_cat_icons( wp_list_categories(‘show_count=1&title_li=’.'&echo=0′),(‘class=myicons’));
    else
    wp_list_categories(‘show_count=1&title_li=’);

    Thanks a lot.

    Will

  3. Thanks, this plugin it´s good and I don´t knew how to adjust my icons vertical. I try with “align” and “valign” but it´s not work.

    With this code all is working.

    Sorry for my English. Thanks,

  4. Bonjour et merci pour ce plugin.
    Malheureusement, je n’arrive pas à appliquer cette procédure pour aligner verticalement les icones avec le texte des categories.
    Pour info, j’utilise le widget… pour cette partie “get_cat_icon(‘class=myicons’);” à mettre dans le theme (dans quel fichier et où ?)

  5. @Nico

    Salut. Avec Firebug, rien de plus simple pour tester le CSS :
    h2 > a > img {
    vertical-align:middle;
    padding-right:5px;
    }

  6. Hi, I am testing your plugin, and I have make it work. only think I am wondering is how to separate a little the text title form the category icon in the side bar. Thanks in advance

  7. Hi,

    vertical-align: middle; did not work for me, so I managed to work around the problem like this.

    #sidebar{
    width: 220px;
    }
    #sidebar ul{
    list-style: none;
    }
    #sidebar ul li{
    width: 220px;
    float: left;/*important*/
    margin-bottom: 20px;
    font-size:18px;
    font-family:Georgia, “Times New Roman”, Times, serif;
    font-weight:normal;
    }
    #sidebar ul li a{
    display:block;/*To hover over the link without hovering over the text*/

    }
    #sidebar ul li a img{
    display:block;/*important*/
    float: left;/*important*/
    margin-top: -18px; /*this is the offset to center the image in front of the text. Instead of the text in the center of the image.*/
    }

    I had a div#sidebar and worked with a unordered list.

    Maybe someone has the same problem. And if anybody thinks this can be done more easily. please let me know. I’m also just a newby. :)

    Thx, Wig

  8. Hi,

    I have two very simple questions about the line “get_cat_icon(‘class=myicons’);”:
    1 – in which theme files do I put this line
    2 – and where in each file do I put this line

    Any help would be greatly appreciated!

  9. Hi,

    for non-Programmers. Could you please specify your answer to Kendall please?

    What is a theme file? What is its exact name? and Where can i find it (directory/path)?
    Thanks,

    Ann.

  10. ¿Dónde debo insertar el código?

    get_cat_icon(‘class=myicons’);

    ¿En qué archivo debo pegarlo?

  11. Hi

    Firstly, I LOVE this plugin. It makes life so much easier!

    Question, how would I align the category title underneath the icon (as opposed to next to it)