18043 sujets

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

Centralisation impossible !

Bonjour et merci de bien vouloir m'aider...
(j'ignore si je suis au bon endroit mais bon... pardon sinon !)

Alors voilà mon souci. J'ai essayé de minimiser la situation et donc j'ai écrit un petit code html, un essai en quelque sorte, où j'ai inséré dans le body un premier conteneur de 900px par 620px qui reste centré horizontalement et collé au top.
Ce serait là dedans que je cherche à centrer et présenter différentes images que je n'arrive pas à centrer. Mon problème est là !

J'ai donc ensuite essayé de centrer dedans deux images exemple, l'une qui fait 408x594px et l'autre qui fait 600x331px.

Or, mon objectif étant de changer les photos (j'en dispose pas mal !) centrées de différentes dimensions, toujours au maximum de 594px, selon les cas largeur ou hauteur, j'aimerais selon les cas, les montrer tout en gardant ces images au centre du conteneur.
Ce que je ne parviens pas évidemment !!!.

En plus mon texte que je voudrais insérer en dessous des images et centré aussi, apparaît centré, mais hors du conteneur !!! Alors franchement...Ça me rend fou !

Je n'arrive pas... je me sens largué pas possible...
Aidez-moi s'il vous plaît... Smiley decu
Je vous fais suivre mon exemple en codes...

HTML >
<!DOCTYPE html>
<head>
		<meta charset="utf-8" type="text/css" />
        <link rel="stylesheet" href="essai1.css" />
		<link rel="shortcut icon" type="image/x-icon" href="favicsadn.ico" />	
		<!--[if lt IE 8]>
            <link href="/css/2/ie7_old.css?1331649634" rel="stylesheet" type="text/css" media="screen" />
        <![endif]-->
        <!--[if lt IE 7]>
            <link href="/css/2/ie6_old.css?1331649634" rel="stylesheet" type="text/css" media="screen" />
        <![endif]-->
		<!--[if lte IE]>
		<style type="text/css">
		div#page {
			height: 100%;
			margin-top: 0;
		}
		</style>
		<![endif]-->
		<title>ESSAI 1</title>
</head>
<body>

<div id='content'>

	<div id='foto'>
		<div id='imgcentre'>
			<img src='image1.jpg' alt='' />
			<p class='info'>image1</p>
		</div>
	</div>

</div>
</body>
</html>


Et ensuite mon CSS >

#content{ 
	width: 900px; height: 620px;
	/*background-color: red;*/
	border: 1px solid red; 
	margin: 0 auto; 
	}
#foto {
	border: 1px solid blue; 
	margin: 0 auto;
	}
.info { 
	font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
	color: #999; text-align: center; font-size: 12px;
	}	
#image1{width: 408px; height: 594px; margin-left: auto; margin-right: auto; border: 1px solid #329966; }
#image2{width: 600px; height: 331px; margin-left: auto; margin-right: auto; border: 1px solid #0000ff; }


MERCI de bien vouloir m'aider... Je n'arrive pas à comprendre pourquoi je n'arrive pas alors que je sais que cela doit être tout bête (probablement comme moi !) Je vais sûrement avoir l'air ridicule... Smiley confused

@ très vite et merci à tous... Smiley cligne
Salut !

Deux choses :
-Ton CSS #image1, #image2,.... ne corresponds à rien puisque tu n'as pas mis d'attribut "id" sur tes balises image, rajoute un id="image1", ect.

-Par rapport aux regles CSS que tu appliques à #image1,... je serais toi, je ne spécifierais que la largeur ( la hauteur va s'adapter toute seule, et ça evite d'avoir des images deformées si les valeurs ne correspondent pas ).
Pour pourvoir centrer tes images avec margin right et margin left auto, il faut que tu rajoute un display:block; à tes images.

Normalement ça devrait marcher Smiley cligne
Bonjour,

enlève la div imgcentre, c'est elle qui est centrée par la div foto mais pas son contenu. De plus elle ne sert à rien dans ton exemple.
Le paragraphe est centré par ta class info, mais la photo.

Sur un plan sémantique, il vaudrait mieux mettre des class que des id
Sujet clos
Aller à