выровняйте значки с 1 или 2 строками текста с помощью css - PullRequest
Новая
       13

выровняйте значки с 1 или 2 строками текста с помощью css

1 голос
/ 11 февраля 2011

У меня есть набор иконок, каждая с 1 или 2 строками текста внизу.я хочу, чтобы они текли рядом друг с другом на странице.для каждого пользователя существует различное количество значков, поэтому я не могу установить количество строк.вот что у меня есть: щелкните для изображения

Теперь я пытаюсь сделать так, чтобы значки располагались на горизонтальной оси, а текст делал то же самое.так что даже если элемент имеет только 1 строку текста, в нем должно быть место для двоих.в основном я хочу выровнять каждый элемент по вертикали.это имеет смысл?

Я пробовал различные попытки сделать иконки вертикально выровненными по верху, но ничего не получалось.какие-нибудь идеи?

вот основной код: 

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

1 Ответ

0 голосов
/ 11 февраля 2011

Здесь:

JSFiddle

Добавлено: 

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

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

Вокруг группы из 2 элементов.

...