Question

我有一组图标，每个图标下面都有1或2行文字。我希望它们在页面上彼此相邻。每个用户都有可变数量的图标，因此我无法设置行数。这就是我所拥有的：click for image

现在我正在尝试使图标在水平轴上排列，文本也是如此。因此，即使一个项目只有一行文本，它也应该有两个空间。基本上我想将每个项目垂直对齐到顶部。这有意义吗？

我尝试了各种尝试使图标垂直对齐到顶部，但没有任何效果。任何想法？

这是基本代码：

    <div id="menuicons">

    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_buses.png" alt="Buses"></a>
<br><span align="center">Buses</span></div>
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_bugs.png" alt="Report Bugs"></a>
<br><span align="center">Report Bugs</span></div>
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_directory.png" alt="The Directory"></a>
<br><span align="center">The Directory</span></div>
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_places.png" alt="Places"></a>
<br><span align="center">Places</span></div>
    more icons, etc...
    </div>

和一些css：

#menuicons{
    padding:2px 2px 2px 2px;
    text-align:center;
    position:relative;
}

#menuicons img{
    border:none;
    padding-bottom:2px;
    padding-top:2px;

    height:64px;
}

.menuicon{
    display:inline-block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    text-align:center;
    padding:3px 3px 3px 3px;
    width:70px;
    overflow:hidden;

    position:relative;
}
.menuicon span{
    display:block;
    width:78px;
    height:2.1em;
}

Answer 1

下面：

JSFiddle

添加了：

.container {
    float:left;
    width: 100px;
}

<div class="container"></div>

围绕2个元素组。

使用1或2行文本将图标与css对齐

1 个答案: