28172 sujets

CSS et mise en forme, CSS3

Margin auto (encore et toujours)

Salut tout le monde, je découvre tout juste les joies du code et je bloque sur un sujet qui a été certes mentionné beaucoup de fois sur ce site et... sur plein d'autres d'ailleurs mais il y a certainement quelque chose que je n'ai toujours pas compris car je n'arrive toujours pas à centrer ma f**** div malgré qu'elle soit dans un conteneur.
J'ai cru comprendre que si l'on veut centrer un élément (ma div) dans un conteneur il fallait que ce conteneur ait une position soit "relative" soit "absolute".
Fine! Je fais mais rien ne se passe Smiley ohwell
Alors si vous avez un petit peu de temps pour me répondre je vous en serai grandement reconnaissant! Smiley sweatdrop

Je me permets de vous donner mes codes HTML:

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
 
  <title>TEST</title>
  <link rel="stylesheet" href="css/style.css">
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
</head>

<body>
<section class="container"> 
    <div id="logotrails">
        <h1>test</h1>
    </div>		
</section>

</body>

</html>


Et CSS:

body{ 
	margin:0;
	height:100%;
	color:#fff;}

.container{
	position:relative;
	margin:0 auto;
	width: 960px;}

#logotrails{
	margin-left:auto;
    margin-right: auto;
    color:black}
Bonjour et bienvenue sur le forum, maxero Smiley smile

Non, il ne faut justement pas positionner ton élément (ni de façon relative, ni de façon absolue). On reste en "static" (positionnement par défaut) et pour peu que le conteneur ait une largeur de définie, les marges externes automatiques latérales le centreront.

Exemple en ligne (j'ai changé la largeur de 960px en 96px pour l'exemple) :
> ici
Modifié par audrasjb (27 Feb 2015 - 11:51)
Salut audrasjb et merci d'avoir répondu aussi vite (j'étais sur le point de me taper la tête contre mon clavier... Il te remercie de m'avoir stoppé à temps Smiley mur )

Du coup j'ai compris de travers par rapport au position..

SI je comprends bien, si je ne mets pas de largeur à mon élément celui ci se retrouvera automatiquement collé au côté gauche de mon conteneur lorsque celui ci est:

.container{
	position:relative;
	margin:0 auto;}


Donc pour tout élément qui est dans ce conteneur il faudra que je leur assigne une largeur si je veux que ceux ci soient centrés.

Ou je n'ai toujours rien compris? Smiley eek
Bonjour.

En gros pour centrer facilement un élément (quand c'est possible), on laissera le positionnement par défaut (donc on ne précise pas le position:...), on lui met une largeur et on lui met une marge auto sur la gauche et la droite.

Donc si tu veux centrer ton container, il faut ça, et pour centrer ce que tu as dans ce conteneur, tu refais la même manip' (et pour terminer, si tu veux centrer le texte dans ton h1 -> text-align:center)
Sujet clos
Aller à