aligner les icônes avec 1 ou 2 lignes de texte pour compléter avec css

J'ai un ensemble d'icônes, chacune avec 1 ou 2 lignes de texte en dessous. Je veux qu'ils coulent l'un à côté de l'autre sur une page. il y a un nombre variable d'icônes pour chaque utilisateur, donc je ne peux pas définir le nombre de lignes. Voici ce que j'ai: click for image aligner les icônes avec 1 ou 2 lignes de texte pour compléter avec css

maintenant j'essaie de faire en sorte que les icônes s'alignent sur l'axe horizontal, et le texte fait la même chose. donc même si un article n'a qu'une seule ligne de texte, il devrait y avoir de la place pour deux. fondamentalement je veux aligner verticalement chaque article vers le haut. Cela a-t-il du sens?

J'ai essayé plusieurs tentatives pour aligner verticalement les icônes, mais rien n'a fonctionné. des idées?

est ici le code de base:

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

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

Source

2011-02-11 vee

http://stackoverflow.com/questions/4788302/aligning-icons-to-select-tag – reggie

ici:

JSFiddle

Ajouté:

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

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

Autour de groupes de 2 éléments.

Source

2011-02-11 18:34:44

merci pour l'aide. comment se fait-il qu'il doit être autour de tous les 2 éléments? Je l'ai essayé avec 1 et il a été foiré, mais je ne comprends pas pourquoi. – vee

C'est autour de deux éléments que vous voulez l'un au-dessus de l'autre à droite? Donc, comment ça marche, c'est un groupe et un à côté, puis en raison de la faible largeur il le force directement en dessous, ensuite les groupes de deux sont flottants à gauche pour leur permettre de s'aligner joliment côte à côte. est-ce que cela aide? –

ooohh c'est l'impression en colonnes de deux n'est-ce pas? C'est un problème car il y a beaucoup d'icônes possibles (donc il pourrait facilement y avoir plus de 2 lignes). et chaque utilisateur a un nombre différent d'icônes, donc je ne peux pas prédire le nombre de lignes, il doit juste travailler pour chaque possibilité. – vee

aligner les icônes avec 1 ou 2 lignes de texte pour compléter avec css

Répondre

Questions connexes