[résolu][CSS] Centrer un truc

FiP_ · le 23 juin 2006

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;
}

Quarky · le 23 juin 2006

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

Par contre deux choses qui résoudront pas ton problème mais pourraient émliorer ton site :

- Pourquoi ne pas utiliser un link au lieu d'un @import

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

FiP_ · le 23 juin 2006

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é... ?

- Pourquoi ne pas utiliser un link au lieu d'un @import

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 ? 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:

FiP_ · le 26 juin 2006

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...

Shinuza · le 26 juin 2006

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:

FiP_ · le 26 juin 2006

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

:move:

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

FiP_ · le 27 juin 2006

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

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?

Shinuza · le 28 juin 2006

Bah non pourquoi?

C'est une propriété CSS comme une autre...

Quarky · le 28 juin 2006

Normalement elle doit être utilisée pour du texte uniquement mais bon c'est une utilisation un peu détournée ...

Du moment que ca marche ! :eeek2:

FiP_ · le 28 juin 2006

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:

Shinuza · le 28 juin 2006

Bah c'est donné pour un paragraphe de toute façon, si tu fais <p><img src="" alt=""/></p>

Je vois pas le blème :yes:

FiP_ · le 8 août 2006

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?

windu.2b · le 8 août 2006

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)

FiP_ · le 9 août 2006

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..

Connexion

[résolu][CSS] Centrer un truc

Messages recommandés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Archivé