[Résolu] Centrage d'une série de vignettes

Bonjour.

J'ai un soucis de centrage d'une galerie de photos que je ne parviens pas à centrer dans une page sans définir une largeur, ce qui est aberrant vu qu'aujourd'hui tout doit s'adapter à tout type d'écran.

.gal {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gal li {
	float: left;
	width: 200px;
	margin: 7px 14px 7px 2px;
}

.gal .thumb {
	display: block;
	height: 200px;
	width: 200px;
	line-height: 200px;
	text-align: center;
	background-color: #FFFFFF;
	border-radius: 7px;
	box-shadow: 1px 1px 2px #555555;
}

.gal .thumb img {
	border: 1px solid #CCCCCC;
	vertical-align: middle;
}

Portion HTML...

<ul class="gal">
	<li>
		<span class="thumb">
			<a href="photo_01.jpg" width="650" height="975" rel="lightbox" title="© 2011 – La photo">
				<img src="photo_01_th.jpg" width="100" height="150" alt="Photo" />
			</a>
		</span>
	</li>
</ul>

Pas moyen de centrer l'ensemble horizontalement dans le container.

Merci.

Bonjour

Tu peux essayer d'utiliser des dimensions relatives pour tes images (en CSS), et supprimer les dimensions (fixes) en HTML.
Modifié par thierry (05 Oct 2015 - 18:18)

Bonjour,

Cherches-tu à faire quelque chose comme ceci ?
http://codepen.io/anon/pen/YyVNRw

Tu as quelques possibilités :
- Exploiter le centrage par text-align:center, à condition que tes éléments à centrer soient de type inline. (merci inline-block !)
- Exploiter le centrage tabulaire grâce à display:table-cell, et text-align:center;

Et si tu ne veux vraiment pas gérer les largeurs, il existe la solution des flexbox :
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Mais attention à la compatibilité des navigateurs.
Modifié par Nigel (06 Oct 2015 - 09:41)