Comment centrer un élément de bloc sans connaître sa largeur?

Le code ci-dessous fonctionne très bien à 1280x800, cependant, si j'ajoute une autre vignette, la largeur du <ul> devient égale à la largeur <body> et <ul> n'est plus centrée. Je ne veux pas spécifier la largeur <ul>, ce qui résoudrait le problème. Je veux que les vignettes occupent tout l'espace libre indépendamment de la résolution, mais en même temps avoir des marges égales sur la gauche et la droite. Existe-t-il un moyen CSS pur de le faire sans calculer la largeur de <ul> en JavaScript chaque fois que la page se charge ou en utilisant des requêtes média CSS3?Comment centrer un élément de bloc sans connaître sa largeur?

<html> 
<head> 
    <title>Gallery</title> 
    <style type="text/css" media="screen"> 
     body { 
      text-align: center; 
     } 
     ul { 
      padding: 0; 
      display: inline-block; 
      list-style-type: none; 
     } 
     li { 
      float: left; 
      width: 200px; 
      background-color: violet; 
     } 
    </style> 
</head> 
<body> 
    <ul> 
     <li>thumbnail</li> 
     <li>thumbnail</li> 
     <li>thumbnail</li> 
     <li>thumbnail</li> 
     <li>thumbnail</li> 
     <li>thumbnail</li> 
    </ul> 
</body>

Source

2010-08-01 Andrii Ponomarov

Vous pouvez toujours utiliser des listes, en ajoutant le « display: inline-block » aux éléments li se

<html> 
<head> 
<title>Gallery</title> 
<style type="text/css" media="screen"> 
    body { 
     text-align: center; 
    } 
    ul { 
     padding: 0; 
     list-style-type: none; 
     width:100%; 
    } 
    li { 
     width: 200px; 
     display:inline-block; 
     background-color: violet; 
    } 
</style> 
</head> 
<body> 
<ul> 
    <li>thumbnail</li> 
    <li>thumbnail</li> 
    <li>thumbnail</li> 
    <li>thumbnail</li> 
    <li>thumbnail</li> 
    <li>thumbnail</li><li>thumbnail</li> 
</ul> 
</body> 
</html>

Source

2010-08-01 10:43:30 pop850

Tout d'abord, après avoir examiné votre problème je pensais qu'il était un peu impossible. Mais j'ai alors réalisé que vous pouviez profiter de la façon dont les images sont affichées et fonctionnent dans le navigateur. Essayez le code suivant et voir si cela fonctionne pour vos besoins:

<html> 
<head> 
    <title>Gallery</title> 
    <style type="text/css" media="screen"> 
     body { 

     } 
     div { 
      text-align:center; 
     } 
     .thumb { 
      display:inline; 
      margin:5px; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div> 
     <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div> 
     <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div> 
     <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div> 
     <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div> 
     <div class="thumb"><img src="http://cvcl.mit.edu/hybrid/cat2.jpg" width="200"></div> 
    </ul> 
</body>

Vous pouvez, si vous vouliez, même enlever le récipient autour des images. Mais il laisse ouverte une sorte de légende.

Source

2010-08-01 10:37:41 Sam152

Bon point, mais je voudrais encore utiliser des listes pour la sémantique comme dans l'exemple ci-dessus. –

Comment centrer un élément de bloc sans connaître sa largeur?

Répondre

Questions connexes