How to align icons and their corresponding text link center in a widget?

by 2 replies
3
Hi,


I posted this elsewhere but wasn't able to solve it. Hoping you guys could help.


I am trying to get a few icons/images with their corresponding text link to:
  • 1st: align in the center of the widget
  • 2nd: have each corresponding link display under its icon.
Example: here - "Featured Categories" section towards the bottom.


I have played around with CSS, but I just can't figure it out.
You can see the widget and its content here (look towards the end for the "Featured Topics" widget).


Thank you so much in advance.
#website design #align #center #icons #link #text #widget
  • [DELETED]
  • Here's the css to the section of the site you used as an example..

    #featured-categories {
    padding:42px 0 38px;
    }
    #featured-categories:after {
    content:' ';
    display:block;
    clear:both;
    }

    #featured-categories .section-heading {
    margin-bottom:28px;
    text-align:center;
    }

    #featured-categories .featured-category {
    display:inline-block;
    padding-top:57px;
    width: 19%;
    vertical-align: top;
    float:none;
    text-align:center;
    background-image:url(images/categories-sprite1.png);
    background-repeat:no-repeat;
    margin:25px 0;
    color:#333;
    text-decoration:none;
    opacity:1;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    }

    #featured-categories .featured-category:hover {
    opacity:0.6;
    /*box-shadow: 0 0 42px 0px rgba(245,245,245,1);
    background-color: rgba(245,245,245,.5);
    border-radius:100px;*/
    }
    #featured-categories .featured-category#featured-cat-biblical {
    background-position:67px 0;
    }

    #featured-categories .featured-category#featured-cat-budgeting {
    background-position:-124px 0;
    }

    #featured-categories .featured-category#featured-cat-save-money {
    background-position:-318px 0;
    }

    #featured-categories .featured-category#featured-cat-make-money {
    background-position:-501px 0;
    }

    #featured-categories .featured-category#featured-cat-entrepreneur {
    background-position:-691px 0;
    }

    #featured-categories .featured-category#featured-cat-career {
    background-position:62px -123px;
    }

    #featured-categories .featured-category#featured-cat-invest {
    background-position:-126px -123px;
    }

    #featured-categories .featured-category#featured-cat-diy {
    background-position:-313px -123px;
    }

    #featured-categories .featured-category#featured-cat-debt {
    background-position:-501px -123px;
    }

    #featured-categories .featured-category#featured-cat-management {
    background-position:-691px -123px;
    }
  • You should go with C++, Java or .net and if you want to learn some basic web development go with PHP
Join the discussion

Next Topics on Trending Feed