Aller au contenu

Comment Centrer une div ?

tankia

Par tankia
dans (X)HTML et CSS

 Partager

Sujets conseillés

tankia

tankia

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
tankia

tankia

Posté
  • Auteur
Posté (modifié)

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é par tankia
Lien vers le commentaire
Partager sur d’autres sites
tankia

tankia

Posté
  • Auteur
Posté

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 !

Lien vers le commentaire
Partager sur d’autres sites
tankia

tankia

Posté
  • Auteur
Posté (modifié)

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"

&quot;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é par tankia
Lien vers le commentaire
Partager sur d’autres sites
  • 5 years later...
lobotomie

lobotomie

Posté
Posté

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?

Lien vers le commentaire
Partager sur d’autres sites
  • 1 year later...
Vixen

Vixen

Posté
Posté

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>

Lien vers le commentaire
Partager sur d’autres sites
Ciseur

Ciseur

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...