Centre des listes non ordonnées dans DIV

Eh bien, je suis dans le mélange de la refonte de mon site AlternativeApps.TK afin que l'utilisateur obtienne la meilleure expérience.Centre des listes non ordonnées dans DIV

J'ai un périphérique appelé div qui a des images de l'icône Windows, Linux, Mac, Android et iOS. Sous les appareils sont leurs noms. le texte est centré sous leurs icônes, mais je n'arrive pas à comprendre comment centrer toutes les images, et le texte dans le même div horizontalement, ne descendant pas verticalement comme il est.

Vous pouvez télécharger la source here.

Source

2011-09-02 Michael Schwartz

Modifier pour de nouvelles informations sur la mise en page horizontale:

#devices > ul {display: inline-block;}

Il! C'est tout ce que vous devez ajouter. Aucun flotteur cassant méchant.

Source

2011-09-02 20:43:06

Quoi de neuf? Je n'ai jamais appris à ce sujet, ou entendu parler de bloc en ligne. –

'inline-block' change la façon dont les éléments sont censés être affichés, et'> 'est utilisé comme sélecteur descendant. donc seuls les 'ul's qui sont des enfants de #devices seront stylisés. – Loktar

Vous n'en avez pas réellement besoin dans cet exemple; c'est juste une habitude parce que c'est un peu plus rapide dans les navigateurs. Il sélectionne les descendants directs, donc '#devices ul' sélectionne tous les uls sous #devices, alors que' #devices> ul' sélectionne ceux qui sont ses enfants directs. Il est si courant d'avoir des uls imbriqués pour des sous-menus que je viens de mettre par habitude. C'est assez commun cependant. D'autre part, inline-block est un bon standard CSS2, mais pour une raison étrange n'est pas si commun. Beaucoup de gens ont une aversion bizarre. Il fait quelque chose bloquer à l'intérieur, et en ligne à l'extérieur. Très pratique ici. –

Ok, j'ai mal compris la question d'abord essayer cela à la place.

#devices{ 
    margin: 0 auto; 
} 

ul li{ 
    float: left; 
    margin-left: 10px /* arbitrary value to stop them from hitting eachother */ 
    text-align : center; 
}

Ensuite, changer votre balisage à quelque chose comme

<div id="devices"> 
    <ul> 
     <li> 
      <img src="your image"/> 
      <p>your text</p> 
     </li> 
     <li> ... so on</li> 
     <li> ... so on</li> 
    </ul> 
</div>

Source

2011-09-02 20:39:40 Loktar

ok merci, cela a fonctionné, comment puis-je obtenir toutes les images, et tels au milieu de la div, et ne pas descendre verticalement? –

Ah j'ai mal compris votre question je suppose ... vous voulez qu'ils soient tous horizontaux. – Loktar

@ mikethedj4 bien ce qui précède * devrait * être ce que vous cherchez. – Loktar

div#devices ul { display:block; float:left; }

Source

2011-09-02 20:41:57 Samich

Centre des listes non ordonnées dans DIV

Répondre

Questions connexes