Voila moi j'ais tout mis en un (mélange de vos idées
Cela donne
http://www.fox-infographie.com/mesdiv.htm
Tout est OK pour moi, sauf que mes DIV ne sont pas centrés dans le DIV Gle de 900px ?
et ça je ne sais pas faire , si non sa marche partout tablettes smartphone etc !! MERCI
Je mets résolu mais si de façon simple vous me centrez mes petits DIV dans le général ce serait TOP
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test christele</title>
<style type="text/css">
div.centre2blanc {height: auto;width: auto;max-width: 900px;margin: auto;text-align: center;}
div.content{ width: 300px; border: 1px solid black; text-align: center; padding: 6px; float:left; margin:5px 0px 0px 5px;}
div p:first-child { text-align:center; font-weight:bold;}
div p:last-child{ width:250px; margin:.5em auto 1em auto;}
/* ____________________media1024______________________ */
@media screen and (max-width: 1024px) {
div.centre2blanc {height : auto;width : auto;max-width : 90%;margin : 22px ;text-align : center;}
}
/* __________________________media 640_____________________ */
@media (max-width:640px) {
body, element1, element2 {width : auto;margin : 0;padding : 0;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width : 100%;}
img {height : auto;width : auto;box-sizing : border-box;}
textarea, pre, samp {overflow-wrap : break-word;hyphens : auto;}
pre, samp {white-space : pre-wrap;}
element1, element2 {float : none;width : auto;}
.hide_mobile {display : none !important ;}
body:before {content : "Version mobile du site";display : block;color : #999999;text-align : center;font-style : italic;}
div.centre2blanc {height : auto;width : auto;max-width : 90%;margin : 22px ;text-align : center;}
}
</style>
</head><body>
<div class="centre2blanc">
<div class="content"><p><b>Titre image</b><br /></p>
<img src="forum/mesdiv.jpg" alt="" />
<p>Un texte expliquant l'image </p>
</div>
<div class="content"><p><b>Titre image</b><br /></p>
<img src="forum/mesdiv.jpg" alt="" />
<p>Un texte expliquant l'image </p>
</div>
<div class="content"><p><b>Titre image</b><br /></p>
<img src="forum/mesdiv.jpg" alt="" />
<p>Un texte expliquant l'image </p>
</div>
<div class="content"><p><b>Titre image</b><br /></p>
<img src="forum/mesdiv.jpg" alt="" />
<p>Un texte expliquant l'image </p>
</div>
<div class="content"><p><b>Titre image</b><br /></p>
<img src="forum/mesdiv.jpg" alt="" />
<p>Un texte expliquant l'image </p>
</div>
<div class="content"><p><b>Titre image</b><br /></p>
<img src="forum/mesdiv.jpg" alt="" />
<p>Un texte expliquant l'image </p>
</div>
<br /></div>
</body></html>
