html - CSS中的垂直对齐菜单

Question

我一直在创建以下菜单。不能让它居中。似乎 span 中的 img 正在破坏显示。

期望的结果:

HTML:

<ul id="rounded-cats" class="cleardiv">
    <li>
        <a href="#">
            <span>
                <img src="http://placehold.it/70" height="70" />
            </span>
            <strong>
                Category name
            </strong>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="http://placehold.it/70" height="70" />
            </span>
            <strong>
                Category name
            </strong>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="http://placehold.it/70" height="70" />
            </span>
            <strong>
                Category name
            </strong>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="http://placehold.it/70" height="70" />
            </span>
            <strong>
                Category name
            </strong>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="http://placehold.it/70" height="70" />
            </span>
            <strong>
                Category name
            </strong>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="http://placehold.it/70" height="70" />
            </span>
            <strong>
                Category name
            </strong>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                <img src="http://placehold.it/70" height="70" />
            </span>
            <strong>
                Category name
            </strong>
        </a>
    </li>
</ul>

CSS:

#rounded-cats {
    text-align: center;
    //display: table;
    border: 1px solid red;
    width: 100%
}
#rounded-cats li {
    //margin-bottom: 20px;
    //height: 190px;
    display: inline;
}
#rounded-cats span {
    background: #c7c7c7;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    text-align: center;
    display: block;
    vertical-align:middle;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#rounded-cats span img {
    display: inline !important  
}
#rounded-cats a:hover span {
    background: #7c6eb0 
}
#rounded-cats a:hover {
    color: #7c6eb0  
}
#rounded-cats img {
    margin: auto;
    display: block; 
}

JSFIDDLE: http://jsfiddle.net/gtux2snu/

Answer 1

看看这个demo

我更改了 #rounded-cats li 和 #rounded-cats span img 样式。

#rounded-cats {
    text-align: center;
    //display: table;
    border: 1px solid red;
    width: 100%
}
#rounded-cats li {
    //margin-bottom: 20px;
    //height: 190px;
    display: inline-block;
    width:150px;//added some width to each li
    float:left;//floated elements left
    text-align:left;//aligned category name with image
    padding:20px;//add padding so it looks good and separated.
}
#rounded-cats span {
    background: #c7c7c7;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    text-align: center;
    display: block;
    vertical-align:middle;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#rounded-cats span img {
    display: inline !important;
    margin-top:18px;//centered img inside circle
}
#rounded-cats a:hover span {
    background: #7c6eb0 
}
#rounded-cats a:hover {
    color: #7c6eb0  
}
#rounded-cats img {
    margin: auto;
    display: block; 
}