Comment Centrer une div ?

tankia · 28 Juillet 2004

Bonjour,

j'ai un problème dont la solution est peut être évidente pour vous mais apres avoir retourné mes codes dans tous les sens je n'arrive pas à centrer une div (conteneur) sans que les div contenues dans cette div soient centrer.

<div name="conteneur centré">

	<div name="contenu non centré" ></div>

</div>

J'espère que la solution existe ! Merci d'avance

Monique · 28 Juillet 2004

Bonjour,

Je pense que cette page répondra à ton problème : Initiation au centrage CSS

Plusieurs solutions sont proposées, pour différentes situations.

Comme celle-ci pour centrer une boîte élastique :

.conteneur {
  text-align: center;
}
.centre {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  text-align: left;
}

tankia · 28 Juillet 2004

Merci beaucoup, je vais consulter cette page et je fais un compte rendu

tankia · 28 Juillet 2004

Très instructif pour mon cas c'est une largeur rigide donc pour une largeur de 760px :

.centre {
 margin-left: auto;
 margin-right: auto;
 width: 760px;
 text-align: left;
}

Merci beaucoup j'irai voir ce site avant de poser des question sur le xhtml/css dorénavant

Modifié 28 Juillet 2004 par tankia

Monique · 28 Juillet 2004

Tu peux aussi ajouter celui-ci à tes favoris : Alsacreations

tankia · 28 Juillet 2004

Oui Alsacreation, je l'avais déjà mais sur alsa les solutions pour centrer la div été :

#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}

Et lors d'un rétrécissement de la fenêtre on apperçoit des problèmes d'affichages du contenu de la page : en effet, le contenu de gauche disparait plus on rétrécit la fenêtre avec les poignées de redimenssion. Donc, je ne vois pas l'utilité de ce code... Sinon beaucoup de bonnes chose sur Alsacreation quand même !

tankia · 28 Juillet 2004

Nouveau problème :

la méthode que j'utilise pour centrer la div fonctionne lorsqu'il y a le code suivant avant la balise html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(Code par défaut des pages html créés sous dreamweaver mx 2004)

Par contre lorsque je le remplace par :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">

que j'ai chopé sur http://openweb.eu.org/articles/xhtml_une_heure/

Je suis sous IE6...

EDIT :

.conteneur {
	text-align: center;
}
.bloc contenu {
	margin-left: auto;
	margin-right: auto;
	width: 760px;
 	 height: 110px;
	text-align: left;
}

ça fonctionne c'est bon merci

Modifié 28 Juillet 2004 par tankia

lobotomie · 21 Janvier 2010

EDIT :

.conteneur {
	text-align: center;
}
.bloc contenu {
	margin-left: auto;
	margin-right: auto;
	width: 760px;
 	 height: 110px;
	text-align: left;
}

ça fonctionne c'est bon merci

doit on insérer ce code dans le head? et comment fait ton pour quil soit attribué à la div puisque quand on crée la div, elle a déja tout ses info de positionnement et de grandeur??

Jai le meme probleme, je veux centrer une image dans ma page qui sert de design central et ajouter texte et autre par dessus sans que ces autres éléments soit centrés.. cependant, il ne saffiche pas correctement lorsque je les regarde en preview.. limage reste centré mais tout le reste nest pas au meme endroit que dans dreamweaver..que dois-je faire?

Vixen · 14 Mars 2011

Bonjour, j'ai un problème pour centrer ma vidéo sur ma page web. J'ai essayer tout plein de possibilité, mais rien y fait. Voici le script en dessous. Si vous pouvez me venir en aide sa serais génial. Merci d'avance

<div style="width:450px;height:300px;"><object width="450" height="300"><param name="movie" value="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"/><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"width="450" height="300"></embed></object></div>

Ciseur · 16 Mars 2011

Bonjour, j'ai un problème pour centrer ma vidéo sur ma page web. J'ai essayer tout plein de possibilité, mais rien y fait. Voici le script en dessous. Si vous pouvez me venir en aide sa serais génial. Merci d'avance
<div style="width:450px;height:300px;"><object width="450" height="300"><param name="movie" value="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"/><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://www.jimiishappy.com/JimiIsHappy_Player.swf?idUser=3820&numeroClip=2"type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"width="450" height="300"></embed></object></div>

Pour centrer une DIV en css, elle doit posséder une largeur fixe et des marges gauches et droites en auto :


#ma-video {
        margin-left: auto;
        margin-right: auto;
        width: 450px;
}

C'est tout ce qu'il y a besoin de faire.

Attention tout de même à ce que la dite DIV ne soit pas en absolute.

Connexion

Comment Centrer une div ?

Sujets conseillés

tankia

Monique

tankia

tankia

Monique

tankia

tankia

lobotomie

Vixen

Ciseur

Veuillez vous connecter pour commenter

Parcourir

Activité