18041 sujets

Questions générales et questions de débutants

Centrer groupe d'images

Bonjour,
Je vous explique mon probleme :
J'aimerais savoir comment centrer le bloc d'images entourer en rouge [voir image], par rapport a la barre des menus du haut.

upload/55855-Capture.PNG

Voici mes codes : 

 <!-- Articles -->
			<div class="articles">
					<a href="" title="article1"><img height="225" src="article1.jpg" alt="Article 1" /><span class="titre"><strong>Titre<strong/></span><div class="date"> 00/00/0000 </div>
					<div class="like" data-href="https://www.facebook.com/pages/Absolucom/1468025410120896?ref=ts&amp;fref=ts" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></a>
					<a href="" title="article2"><img height="225" src="article2.jpg" alt="Article 2" /><span class="titre"><strong>Titre<strong/></span><div class="date"> 00/00/0000 </div></a>
					<div class="like" data-href="https://www.facebook.com/pages/Absolucom/1468025410120896?ref=ts&amp;fref=ts" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></a>
					<a href="" title="article3"><img height="225" src="article3.jpg" alt="Article 3" /><span class="titre"><strong>Titre<strong/></span><div class="date"> 00/00/0000 </div></a>
					<div class="like" data-href="https://www.facebook.com/pages/Absolucom/1468025410120896?ref=ts&amp;fref=ts" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></a>
					<a href="" title="article4"><img height="225" src="article4.jpg" alt="Article 4" /><span class="titre"><strong>Titre<strong/></span><div class="date"> 00/00/0000 </div></a>
					<div class="like" data-href="https://www.facebook.com/pages/Absolucom/1468025410120896?ref=ts&amp;fref=ts" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></a>
			</div>




Et le CSS :

/* Articles */
.articles a
{
        background: white;
        display: inline;
        float: left;
        padding: 10px 10px 25px;
        text-align: center;
		text-decoration: none;
		margin: 2%; 
		color: black;
}

.articles img 
{
        display: block;
        width: inherit;
}

.titre
{
	font-size: 125%
}

.date
{
	font-size: 80%;
	text-align: right;
	color: black;
}
Bonjour nicodft,

Tu ne peux pas !

En effet, tu as placé tes conteneurs (qui sont ici des A) en float:left.
Tes liens vont donc naturellement se placer à gauche.

La solution consiste à virer le float:left (ce qui n'est pas un mal, ça t'évite de devoir gérer le flottement et le pad vis-à-vis du contenant DIV.articles).

Ensuite, il faut passer tes A en DISPLAY:BLOCK voir en INLINE-BLOCK (qui offre plus de souplesse au niveau du dimensionnement et du positionnement.

Il ne te reste qu'à placer les marges latérales en AUTO et tes blocks devraient se centrer.

C'est dommage là j'ai pas le temps de tester mais il me semble que ça devrait résoudre ton soucis.

Par contre sache que ta construction, en sémantique, est peu "orthodoxe". Il me semble qu'une liste UL au lieu d'un DIV serait plus approprié, non ?
Tout comme ton DIV.date peut être remplacé par une balise TIME
<TIME DATETIME="2014-08-27">27-08-2014</TIME> // avec des tirets, pas de slash

Cela indique aux robots que cet élément est une date et donne la capacité à ce robot d'interpréter cette date.

Bonne journée
Modifié par Greg_Lumiere (27 Aug 2014 - 06:58)
As-tu fixé la largeur de tes éléments 1 et 2 ? J'utilise cette technique sur un slider et mes blocs se placent côtes-à-côtes dans leur conteneur. J'ai d'ailleurs fixé la largeur de mon conteneur.
Sujet clos
Aller à