Sujet Précédent Sujet Suivant

Margin-left: auto ne marche pas

Fermé
LightGolgotCCM Messages postés 39 Date d'inscription samedi 29 avril 2017 Statut Membre Dernière intervention 6 avril 2020 - 25 sept. 2018 à 20:00
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 16 nov. 2018 à 15:58
Bonjour,

j'apprends le CSS et html, et je fais des tests de site.

Dans le code ci-dessous, je voudrais centrer le "Que savez-vous sur moi?", mais pour une raison inconnue, le margin-left: auto; et margin-right: auto, qui marche tout le temps ne marche pas ici. Pouvez-vous m'aider svp?

Rendu que ca me donne (capture d'écran): http://image.noelshack.com/fichiers/2018/39/2/1537898214-capture-du-2018-09-25-19-55-47.png
CSS:
body {
background-image: url(./imgs/background/backgroundBody.jpeg);
background-repeat: no-repeat;
background-size: cover;
}
#logoHeader {
height: 100%;
}
#navHeader{
display: flex;
position: absolute;
right: 0px;
bottom: 0px;
width: 50%;
height: 100%;
justify-content: space-around;
}
#navHeader > a,p{
margin-top: 75px;
font-size: x-large;
}

header {
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-between;
position: fixed;
left: 0px;
top: 0px;
border-bottom: 1px solid grey;
background-color: white;
}
#navHeader > a:hover {
background-color: black;
color: white;
}
a,p {
color: black;
text-decoration: none;
margin: 0;
}
#mainSection {
background-color: red;
width: auto;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
}
#mainDiv {
display: flex;
justify-content: center;
}
#titleSection {
display: inline-block;
margin: 0;
margin-left: auto;
margin-right: auto;
background-color: blue;
}


HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Le site à Toto</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<a href="#"><img src="./imgs/others/logoHeader.png" id="logoHeader"/></a>
<nav id="navHeader">
<a href="#">ACCUEIL</a>
<a href="#">CONTACT</a>
</nav>
</header>
<section id="mainSection">
<h1 id="titleSection"><a>Que savez-vous sur moi?</a></h1>
<div id="mainDiv">
<article>
<p>lorem impsum</p>
</article>
<aside>
<p>Lorem ipsum </p>
</aside>
</div>
</section>
</body>
</html>
A voir également:

2 réponses

Réponse 1 / 2
Zero
12 nov. 2018 à 14:29
Salut, 

#mainSection {
background-color: red;
width: auto;
/*margin-left: auto;
margin-right: auto;*/
margin-top: 110px;
text-align: center;
}


Essai ça !
0
Réponse 2 / 2
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
16 nov. 2018 à 15:58
Bonjour,
Pour t'aider à développer et voir comment se positionne tes éléments et avec quelle commande css, je t'invite à découvrir Firebug ou associés (un petit F12 fera apparaître une console qui t'indiquera qui fait quoi et comment, notamment les margin, les padding et autres joyeusetés)
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Balise </br>
erf -
erf -

3 réponses
Que veut dire <p>&nbsp;</p>?
quinn mallory -
prosthetiks -

3 réponses