Jump to content

[résolu][CSS] Centrer un truc


Recommended Posts

Bonjour tout le monde!

je fais un site en xhtml strict et css, et je viens de me rendre compte que je n'arrivait pas à centrer un élement (une image) dans le texte, en utilisant "margin: 0 auto".

Ce qui m'etonne, c'est que l'astuce du margin auto fonctionne pour certaines choses, comme la page elle même qui est bien centrée au milieu de la page, mais pas avec les images dans le texte...

Testez par vous même: copiez/collez le code suivant dans deux fichiers "test.htm" et "global.css", que vous devez mettre dans le même dossier, avec un image, peut importe la quelle, appellée "image.jpg" et de taille raisonable (celle que j'utilise fait 150 pixels par 100)

le code XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >


<head>
<title>test centrage</title>
<style type="text/css" title="leStyle" media="all">
	@import "global.css";
</style>
</head>


<body>
<div id="page">
	<div id="header"></div>

	<p id="prelude">
		<span id="arborescence">
		  Vous êtes ici: 
		<a href="#">racine</a>
		/ <a href="#">blog</a>
		/ <a href="#">archive</a>
		/ <strong>mai</strong>

		</span>
			</p>

	<hr />

	<!-- Sidebar //-->
	<div id="sidebar">

			<!-- Menu //-->
			<div id="menu">
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li id="active"><a href="#">Lien 2</a></li>
					<li><a href="#">Lien 3</a></li>
					<li><a href="#">Lien 4</a></li>
				</ul>
			</div>

			<hr />

	</div>

	<!-- Centre //-->
	<div id="centre">
		<div class="bloc">
			<div class="infos">
				<div class="titre">Bloc 1</div>
				<div class="datecrea">Création: 00/00/0000</div>
				<div class="datemaj">Derniere mise à jour: 00/00/0000</div>
			</div>

			<div class="texte">
				<div class="chapeau">
				Aenean tincidunt imperdiet odio. Nunc in sapien nec urna cursus ullamcorper. Donec libero odio, faucibus ut, egestas at, elementum a, lorem. Suspendisse eu turpis. Cras in est sit amet nibh pharetra consequat. Proin bibendum enim sit amet nibh. Vivamus posuere ornare elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti Duis blandit aliquet erat. Integer mollis vulputate mi. Nullam convallis, nulla sit amet.
				</div>
				<img src="image.jpg" alt="toto" class="gauche" />Aenean tincidunt imperdiet odio. Nunc in sapien nec urna cursus ullamcorper. Donec libero odio, faucibus ut, egestas at, elementum a, lorem. Suspendisse eu turpis. Cras in est sit amet nibh pharetra consequat. Proin bibendum enim sit amet nibh. Vivamus posuere ornare elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti Duis blandit aliquet erat. Integer mollis vulputate mi. Nullam convallis, nulla sit amet iaculis porttitor, turpis libero commodo ipsum, eget sollicitudin mi mi non felis. Nulla orci felis, facilisis sit amet, tempor interdum, pellentesque ut, odio. Nunc a sapien at quam convallis <span class="censure">			  </span>. Maecenas vitae nisi. Nullam ligula libero, cursus fermentum, ornare at, euismod eget, massa. In luctus, diam et tincidunt lacinia, lacus lacus dignissim lacus, eget fringilla neque felis sed magna. Nulla varius venenatis nisi.<br /><br /><img src="image.jpg" alt="toto" class="droite" />Maecenas rhoncus, dolor id consequat lacinia, velit pede malesuada nisi, eu facilisis libero erat sed felis. Phasellus consectetuer nulla eget nibh. Donec sed leo a urna pellentesque tempor. Praesent pede. Etiam convallis sapien sit amet quam. Cras imperdiet dictum odio. Sed accumsan, nisi vitae facilisis fermentum, neque sem molestie odio, ac egestas est velit nec justo. sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consect citudin mi mi non felis. Nulla orci felcitudin mi mi non felis. Nulla orci felcitudin mi mi non felis. Nulla orci felcitudin mi mi non felis.<br /><br /><img src="image.jpg" alt="toto" class="centre" /><br />Cras in est sit amet nibh pharetra consequat. Proin bibendum enim sit amet nibh. Vivamus posuere ornare elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
			</div>
		</div>

		<div class="separateur"><hr /></div>

		<div class="pubs">
		</div>
	</div>

	<!-- Footer //-->
	<p id="footer">
		<span id="footer-gauche">

			<a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a>
			 - 
			<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fparfonium.free.fr%2F_themes%2Fcurrent%2Fglobal.css&usermedium=all">CSS</a>
			 - 
			<a href="http://www.php.net">PHP</a>
		</span>

		<span id="footer-droite">d(^^)b - Design (<a href="http://creativecommons.org/licenses/by/2.5/deed.fr">cc</a>), Contenu (c) Manu 2006 </span>
	</p>
</div>
<p><br /></p>
</body>
</html>

le CSS:

html, body
{
	margin: 0;
	padding: 0;

	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;

	color: #000;
	background-color: #ccc;
}

div#page
{
	width: 850px;

	margin: 0em auto;

	color: #000;
	background-color: #fff;

	border-left: 1px solid #000;
	border-right: 1px solid #000;

	background-image: url("images/logo_bas.jpg");
	background-repeat: no-repeat;
	background-position: bottom left;
}

hr
{
	display: none;
}

a
{
	text-decoration: none;
	color: #03f;
	background-color: #fff;
}




   div#header
{
	height: 100px;
	width: 850px;
	overflow: hidden;

	margin: 0;
	padding: 0;

	background-image: url("images/header.jpg");
	background-repeat: no-repeat;

	border-bottom: solid 1px;
}


p#prelude
{
	width: 850px;
	overflow: hidden;

	font-size: 0.8em;

	margin: 0;
	padding: 0;

	border-bottom: solid 1px;
}

p#prelude a
{
	background: #fff;
	color: #03f;
}

p#prelude a:hover
{
	background: #fff;
	color: #0cf;
}

/* Navigation
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/

	p#prelude span#navigation
	{
		float: right;
		/* border-left: solid 1px; */
	}






#sidebar
{
	float: left;

	width: 220px;
	padding-bottom: 4em;
}

#sidebar div
{
	padding-left: 10px;
	padding-top: 20px;
}


/* Pubs technos (boutons "powered by", "licenced by", etc...)
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/

	div#technos
	{
		position: relative;
		top: 20px;

		width: 80px;

		padding: 5px;
		margin: 0 auto;

		border: solid 1px #ccc;
	}

	div#technos a img
	{
		padding: 0px;
		margin: 0px;

		border: none;

		/* opacity: 0.5; */
	}

	div#technos a:hover img
	{
		/* opacity: 1; */
	}


#centre
{
	float: left;

	margin: 0;
	padding: 5px 0px 0px 5px;
	width: 580px;

	overflow: hidden;

	border-left: dashed 1px;
}

#centre div.separateur
{
	height: 80px;

	background-image: url("images/divider.jpg");
	background-repeat: no-repeat;
	background-position: center;
}

/* Pubs (Google AdSense) (taille: 468x60 "Banner" )
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/

	#centre div.pubs
	{
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 10px;

		width: 468px;
		height: 60px;
	}



/* Blocs - Infos (titre, date, etc. )
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/
	#centre div.bloc div.infos
	{
		margin-bottom: 0.5em;
		border-bottom: dotted 1px #ccc;
		padding-bottom: 0.5em;
	}

	#centre div.bloc div.infos h2.titre
	{
		font-size: 1.6em;
	}

	#centre div.bloc div.infos div.date
	{
		margin-bottom: 0.5em;
	}

	#centre div.bloc div.infos div.musique
	{
		font-size: 0.8em;

		height: 12px;
		text-indent: 10px;

		background-image: url("images/note.gif");
		background-repeat: no-repeat;
		background-position: top left;
	}

	#centre div.bloc div.infos div.datecrea
	{
		font-size: 0.8em;
	}

	#centre div.bloc div.infos div.datemaj
	{
		font-size: 0.8em;
	}



/* Blocs - texte (contenu)
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/
	#centre div.bloc div.texte
	{
		/* alinéa? lettrine? etc. */
		margin: 0;
		padding: 0;
	}

	#centre div.bloc div.texte h3.section
	{
		/* titre de section */
		font-size: 1.4em;

		margin-top: 0.7em;
		margin-bottom: 0em;
	}

	#centre div.bloc div.texte span.censure
	{
		background-color: #000;
		color: #fff;
	}

	#centre div.bloc div.texte div.quote
	{
		position: relative;
		top: 0px;
		left: 40px;

		/* white-space: pre-wrap; */
		/* pour les retour à la ligne */
		/* marche pas sous ie :'( sa mère */

		width: 400px;
		min-height: 30px; /* marche pas sous ie non plus mais c'est moins grave (sa mère quand même) */

		padding: 15px 0px 15px 100px;
		margin: 0.5em 0 0.5em;

		background-image: url("images/quote.jpg");
		background-repeat: no-repeat;
		background-position: top left;

		border: 1px dashed #000;

		background-color: #fff;
		color: #000;
	}

	#centre div.bloc div.texte div.signature
	{
		height: 77px;

		background-image:url("images/sig.jpg");
		background-repeat:no-repeat;
		background-position: bottom right;
	}

	#centre div.bloc div.texte div.signature h3
	{
		display: none;
	}


	#centre div.bloc div.texte div.chapeau
	{
		padding: 5px;
		border: solid 1px #ccc;

		margin-bottom: 20px;
	}



/* Blocs - texte - images
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/

	#centre div.bloc div.texte img
	{
		padding: 5px;
		margin: 0px;

		border: none;
	}

	#centre div.bloc div.texte img.gauche
	{
		float: left;
	}

	#centre div.bloc div.texte img.droite
	{
		float: right;
	}

	/* TODO */
	#centre div.bloc div.texte img.centre
	{
		margin: 0 auto;
	}


p#footer
{
	width: 850px;
	overflow: hidden;

	margin: 0;
	padding: 0;

	clear: both; /* pour que ça marche sous firefox :D */

	background: #000;
	color: #fff;

	line-height: 2em;
	font-size: 0.8em;
}

p#footer span#footer-droite
{
	float: right;
}

p#footer span#footer-gauche
{
	float: left;
}

p#footer a
{
	background: #000;
	color: #ccc;
}

p#footer a:hover
{
	background: #000;
	color: #0cf;
}

Link to comment
Share on other sites

Là comme ca à froid je vois pas : pas trop réfléchi en fait ...

Peut être y a t il une condition supplémentaire pour que ca marche? je me souviens que j'avais eu des soucis, à mes débuts, avec les "position: machin", avant qu'on me dise que pour que ca marche, il faut que le div "parent" ait, lui aussi, une position définie (même position: static, au pire)

Paut être que les marges du parents doivent avoir une certaine propriété... ?

Merci pour le lien, je n'etait pas au courant de ces différences. :chinois:

- J'ai vu que tu utilises des hr inclus à chaque fois dans une div. Pourquoi ne pas styler directement les hr ? :chinois:Styling <hr>

Je ne me souvenais plus... mais en suivant ton lien, je me suis rendu compte que je l'avais déja lu, et la réponse est: parceque je remplace le hr par une image, et:

Because I did not find a workaround, I've added a div in the source code:

<div class="hr"><hr /></div>

:smack:

Link to comment
Share on other sites

pardonnez mon ignorance mais c'est quoi qu'il veut centrer

Je cherche à centrer une image dans mon bloc de texte; quelque chose du genre

bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla 
			xxxxx
			xxxxx
bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla 

Où "xx" est l'image..

Mais, de maniére plus génerale, je cherche à comprendre pourquoi j'arrive à centrer certains élément en définissant leurs "margin" en auto, et d'autres non.

Je vais essayer de faire un exemple plus simple que mon xhtml/css actuel...

Link to comment
Share on other sites

Il te faut définir la taille de ton bloc, en pixel ou em. Ensuite définir margin left:auto (alignement à droite) margin-right:auto (alignement à gauche), et les deux combinés centrent le contenu.

IE ne le supporte pas, il faut utiliser text-align:center.

Maintenant à froid et au boulot, je peux pas faire les tests pour t'indiquer la bonne voie :zarb:

Link to comment
Share on other sites

Il te faut définir la taille de ton bloc, en pixel ou em.

:francais:

Alors je ne pourais pas centrer une image, qui peut avoir des tailles différentes?

----------

Vous allez rire, mais ca marche bien avec:

text-align: center;

C'est pas un truc qu'il faut éviter d'utiliser?

Link to comment
Share on other sites

Oui, voila: c'est une propriété de texte qui a été détournée.. et donc le comportement de text-align pourrait changer au fur et à mesure de l'évolution des différents navigateurs. :eeek2:

Link to comment
Share on other sites

  • 1 month later...

Récapitulons.

Pour qu'un div soit centré, à la fois sous ie et sous firefox, il faut écrire ces deux lignes: ?

#centre div.bloc div.texte img.centre
{
margin: 0 auto;		/* pour Firefox */
text-align: center; /* pour Internet Explorer */

float: none;
vertical-align: baseline;
}

Des remarques? commentaires? suggestions? insultes?

Link to comment
Share on other sites

Récapitulons.

Pour qu'un div soit centré, à la fois sous ie et sous firefox, il faut écrire ces deux lignes: ?

#centre div.bloc div.texte img.centre
{
ext-align: center; /* pour IE */
margin: 0 auto;	 t/* pour Firefox */

float: none;
vertical-align: baseline;
display: block;
}

Des remarques? commentaires? suggestions? insultes?

juste une remarque (si j'ai bien tout compris): tu as inversé les commentaires ("pour IE", "pour Fx"), car je crois que c'est l'inverse, comme je l'ai mis!

voilà, ca ne change rien à l'exécution des CSS, mais ca permet d'éviter les erreurs pour d'autres, qui risqueraient de se voir "tromper" par les commentaires mal placés (le genre de surprise sur lesquels on peut passer beaucoup de temps avant de comprendre où est l'erreur)

Link to comment
Share on other sites

juste une remarque (si j'ai bien tout compris): tu as inversé les commentaires ("pour IE", "pour Fx"), car je crois que c'est l'inverse, comme je l'ai mis!

mea maxima culpa! :eeek2:

J'ai corrigé mon message.

je m'en étais rendu compte dans mon code, mais j'ai oublié de modifier mon post..

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...