Html CSS中的垂直对齐菜单_Html_Menu_Css

Html CSS中的垂直对齐菜单

html menu css

Html CSS中的垂直对齐菜单,html,menu,css,Html,Menu,Css,我一直在创建下面的菜单。不能把它放在中间。似乎img内部span正在破坏显示所需结果： HTML: <ul id="rounded-cats" class="cleardiv"> <li> <a href="#"> <span> <img src="http://placehold.it/70" height="70" /> &l

我一直在创建下面的菜单。不能把它放在中间。似乎

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>

#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:

您必须使

li

内联块

并给

span

一些填充：

#{
显示：内联块；
}

跨度：

#圆形猫跨{
宽度：70px；
高度：70像素；
填充：21px；/*以获得112px的跨度宽度和高度*/
/*代码*/
}

看看这个

我对

#圆形猫li

和

#圆形猫跨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; 
}

看看这个

我现在完全得到了你想要的。就像你想要的一样。看看小提琴，告诉我这是不是你想要的

更新了

我的解决方案是使用

float:left

到

li

元素，并在

5n

之后清除

float

：

#维护内容{
位置：相对位置；
宽度：100%；
保证金：0自动；
文本对齐：居中；
}
#圆猫{
文本对齐：居中；
边框：1px纯红；
显示：内联块；
}
#圆猫李{
//边缘底部：20px；
//高度：190px；
显示：内联；
}
#圆猫跨度{
背景：#c7c7c7；
宽度：112px；
高度：112px；
边界半径：50%；
-webkit边界半径：50%；
-moz边界半径：50%；
文本对齐：居中；
显示：块；
垂直对齐：中间对齐；
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
-ms转换：所有0.3秒轻松输入输出；
过渡：所有0.3秒的缓进缓出；
}
#圆形猫跨img{
显示：内联！重要
}
#圆形猫a：悬停跨度{
背景：#7c6eb0
}
#a:悬停{
颜色：#7c6eb0
}
#圆形猫{
保证金：自动；
显示：块；
}
#圆形猫>李{
浮动：左；
利润率：20px；
}
#圆形猫>李：第n个孩子（5n）{
清除：左；
左侧填充：65px；
}

我认为这应该可以做到：

我添加了一个

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中的一些问题，您可以这样做：

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
保证金：0；
}
#圆猫{
文本对齐：居中；
边框：1px纯红；
宽度：100%；
保证金：0；
填充：0；
显示：内联块；
}
#圆猫李{
显示：内联块；
利润率：20px；
}
#圆猫跨度{
背景：#c7c7c7；
宽度：112px；
高度：112px；
边界半径：50%；
-webkit边界半径：50%；
-moz边界半径：50%；
文本对齐：居中；
显示：块；
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
-ms转换：所有0.3秒轻松输入输出；
过渡：所有0.3秒的缓进缓出；
}
#圆形猫跨度：前{
身高：100%；
内容：“；
垂直对齐：中间对齐；
显示：内联块；
}
#圆形猫跨img{
垂直对齐：中间对齐；
}
#圆形猫a{
文字装饰：无；
}
#圆形猫a：悬停跨度{
背景：#7c6eb0
}
#a:悬停{
颜色：#7c6eb0
}

这是我的密码笔我将元素分割成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>

ulli{
列表样式类型：无；
左边距：10px；
}
李{
显示：内联块；
}
李阿{
颜色：#000；
文字装饰：无；
边缘底部：10px！重要；
}
#圆的{
文本对齐：居中；
//显示：表格单元格；
垂直对齐：中间对齐；
利润率：1米0；
高度：自动；
位置：相对位置；
}
#四舍五入img{
边缘底部：55px；
位置：相对位置；
}
#圆猫{
背景：#c7c7c7；
宽度：100px；
高度：100px；
边界半径：50%；
-webkit边界半径：50%；
-moz边界半径：50%；
文本对齐：居中；
显示：块；
垂直对齐：中间对齐；
-webkit过渡：所有0.3轻松输入输出；
-moz转换：所有0.3秒都易于输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
-ms转换：所有0.3秒轻松输入输出；
过渡：所有0.3秒的缓进缓出；
文本对齐：居中；
边框框：尺寸；
边缘底部：45像素；
填充：20px；
位置：相对位置；
}

FYI

//显示：表格

不是CSS注释，您应该使用以下内容：

/*display:table*/无法获取是否正常？告诉我或者我删除这个答案：）
#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 */
}

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>