Centrer les éléments de la liste ul, même si la fenêtre est plus large que la fenêtre (voir explication)

Question

J'ai un <ul> centré et contenant des images, affichées côte à côte sur une rangée. Le problème survient lorsque le client redimensionne le navigateur ou a une résolution inférieure à la largeur du <ul> avec les images qui s'y trouvent.

Ce que je suis en train de réaliser est que le centre de la <ul> reste toujours au centre du navigateur (même lorsque la largeur du navigateur est plus petite que la largeur de <ul>), et les deux côtés de la <ul> doivent se couper en dehors de la navigateur de manière égale.

Est-ce possible sans JavaScript?

Answer 1

Oui, bien que vous ayez besoin d'un <div> supplémentaire, et cette solution suppose que le <ul> a une hauteur et une largeur connues.

Ce serait un peu plus facile de répondre si nous pouvions voir votre code, mais en supposant que vous avez obtenu quelque chose comme ceci:

<style type="text/css"> 
    #pics { 
     width: 300px; 
     margin: 0 auto; 
    } 

    #pics li { 
     float: left; 
    } 
</style> 
... 
<ul id="pics"> 
    <li><img src="pic1.jpg" width="100" height="100" /></li> 
    <li><img src="pic2.jpg" width="100" height="100" /></li> 
    <li><img src="pic3.jpg" width="100" height="100" /></li> 
</ul> 

Ensuite, vous pouvez obtenir le comportement de centrage vous cherchez comme ceci:

<style type="text/css"> 
    #centerer { 
     height: 100px; 
     position: relative; 
    } 

    #pics { 
     position: absolute; 
     left: 50%; 
     margin-left: -150px; 
     width: 300px; 
     margin: 0 auto; 
    } 

    #pics li { 
     float: left; 
    } 
</style> 
... 
<div id="centerer"> 
    <ul id="pics"> 
     <li><img src="pic1.jpg" width="100" height="100" /></li> 
     <li><img src="pic2.jpg" width="100" height="100" /></li> 
     <li><img src="pic3.jpg" width="100" height="100" /></li> 
    </ul> 
</div>