Question

嗨我正在努力将我的数字与我的图像对齐，他们不希望对齐。这是一个列表，每行都有一个图像和一个数字。

.category_icon           { height:100px; width:300px; position:absolute; left:350px; top:150px;
        ul                   { list-style:none; height:70px; width:220px; 
            li               { display: inline; margin-right: 4px; width:65px; height:90px;
                img          { width:65px; height:64px;}
                span         { font-family:Tahoma; font-weight:bold; font-size:12px; position:absolute; bottom:7px; width:64px; }
            }
        }
    }



<div class="category_icon">
<ul>
    <li><img src="<%=atm.buttonPath%>/family_category_btn.png" alt="" /><span>346</span></li>
    <li><img src="<%=atm.buttonPath%>/camping_category_btn.png" alt="" /><span>12</span></li>
    <li><img src="<%=atm.buttonPath%>/cooking_category_btn.png" alt="" /><span>546</span></li>
</ul>

如果有人能帮助我，谢谢你。

Answer 1

solution with text below
solution with centralised text below

对于图片，您必须在开始使用它们之前更改其diplay属性....在此处添加相同内容并将li添加到display: inline-block; that would help

待办事项：

li {
    display: inline-block; /*changed */
    margin-right: 4px;
    width:65px;
    height:90px;
    text-align:center;
}
img {
    display:block; /*added */
    width:65px;
    height:64px;
}

PS：我不知道LESS ...所以给了你一个通用的解决方案

Answer 2

http://jsfiddle.net/Qm6Bm/

.category_icon {
    height: 100px;
    width: 300px;
    position: absolute;
    left: 350px;
    top: 150px;

    ul {
        list-style: none;
        height: 70px;
        width: 220px;

        li {
            display: inline-block; /* CHANGED */
            margin-right: 4px;
            width: 65px;
            height: 90px;
            text-align: center; /* ADDED */

            img {
                display: block; /* ADDED */
                width: 65px;
                height: 64px;
                margin-bottom: 8px; /* ADDED */
            }

            span {
                font-family: Tahoma;
                font-weight: bold;
                font-size: 12px;
                /* Removed positioning and width */
            }
        }
    }
}

我将li设为内联块，将img设为block。这意味着图像将推动文本（从跨度）下方。然后，通过将text-align: center放在li中，该文本（来自范围）很好地居中。

我将margin-bottom: 8px放在img上，就像你有bottom: 8px {P}

的范围一样

<li> 2个元素没有正确对齐为什么？</li>

2 个答案: