在CSS中垂直对齐菜单

Question

我坚持创建以下菜单。不能把它放在中心位置。似乎img内的span正在打破显示。

期望的结果：

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; 
}

Answer 2

看看这个Fiddle

li{
display: table;
}
span{
display: table-cell;
}

我现在得到了你想要的。就像你想要它一样。看看小提琴，让我知道这是否是你想要的。

已更新!!!!!!!!!!!!!!!!!!!!!

Answer 3

你必须让li inline-block给span一些填充：

demo

#rounded-cats li {
    display: inline-block;
}

跨度：

#rounded-cats span {
    width: 70px;
    height: 70px;
    padding: 21px; /* to get a span width and height of 112px */
    /* code */
}

Answer 4

我的解决方案是使用float: left到li元素并在float后清除5n：

#maintCont {
    position:relative;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#rounded-cats {
    text-align: center;
    border: 1px solid red;
    display: inline-block;
}
#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;
}
#rounded-cats > li {
    float: left;
    margin: 20px;
}
#rounded-cats > li:nth-child(5n) {
    clear: left;
    padding-left: 65px;
}

<div id="maintCont">
    <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>
</div>

Answer 5

我认为这应该可以解决问题：

http://jsfiddle.net/gtux2snu/15/

我添加了一个div元素来包含li内容的相对位置，因此类别名称可以绝对定位到底部。同时将span圈设置为相对，将img设置为绝对值top: 50%和负半高margin-top。

<a href="#">
     <div class="cats-wrap">
         <span>
             <img src="http://placehold.it/70" height="70" />
         </span>
         <strong>
               Category name
         </strong>
    </div>
</a>

我改变了CSS的这一部分：

#rounded-cats span {
    background: #c7c7c7;
    width: 112px;
    height: 112px;
    border-radius: 50%;

    position: relative; /* To contain the absolute positioned img */

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    text-align: center;
    display: inline-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;

    position: absolute;
    top: 50%; /* align all the img 50% top */
    left: 50%;
    margin-left: -35px; 
    margin-top: -35px; /* Half the img height so img is centered */

}
#rounded-cats .cats-wrap{ /* Wrapper element set to relative */
    display: inline-block;
    position: relative;
    height: 140px; /* Add some height to the wrapper so the category name can fit */ 
}
#rounded-cats strong{
    position: absolute;
    bottom: 0; /* Category is aligned to the absolute bottom */
    left: 0; 
    right: 0;
    margin: auto; /* To center the category name */
}

Answer 6

我已经修复了你的css中的一些问题，你可以这样做：

DEMO

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    margin:0;
}
#rounded-cats {
    text-align: center;
    border: 1px solid red;
    width: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
}
#rounded-cats li {
    display: inline-block;
    margin: 20px;
}
#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;
    -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:before {
    height: 100%;
    content:" ";
    vertical-align: middle;
    display: inline-block;
}
#rounded-cats span img {
    vertical-align: middle;
}
#rounded-cats a {
    text-decoration: none;
}
#rounded-cats a:hover span {
    background: #7c6eb0
}
#rounded-cats a:hover {
    color: #7c6eb0
}

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

Answer 7

这是我的代码笔http://jsfiddle.net/dfrierson2/gtux2snu/19/ 我将元素分隔成div用于居中，我使用列表进行内联显示。

ul li {
     list-style-type: none;
    margin-left: 10px;
 }

li {
display: inline-block;
}

li a {
color: #000;
    text-decoration: none;
    margin-bottom: 10px !important;
}
#rounded {
    text-align: center;
    //display: table-cell;

    vertical-align: middle;
    margin: 1em 0;
    height: auto;
    position: relative;


}
#rounded img {
    margin-bottom: 55px;
    position: relative;
}




#rounded-cats  {
    background: #c7c7c7;
    width: 100px;
    height: 100px;
    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;
    text-align: center;
    border-box: sizing;
    margin-bottom: 45px;
    padding: 20px;
    position: relative;
}

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

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

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

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

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

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

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

    </div>
</div>
    </li>
</ul>