Page d'accueil : incapable de centrer une div fixée sur le bas de la page

[BoogyLou]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 11/08/18
Lien du forum : http://buzzkillmuch.forumactif.com/h1-accueil

Description du problème

Bonjour!

Ça fait longtemps que je n'ai pas codé et j'ai décidé de démarrer une page d'accueil. À date, ma page va comme suit :

Code:

<style type="text/css">

body{
background-color: black;
margin: 0px;
padding : 0px;
}

.add{
color:#f8f7e9;
opacity:0.1;
}

.mandala{
background-image: url('https://image.noelshack.com/fichiers/2018/32/6/1534015960-alice-ttest.png');
width:500px;
height:300px;
position: absolute;
margin: 0px auto;
bottom: 0px;
}

.petal{
opacity:0;
 transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease!important
}

.petal:hover{
opacity:1;
 transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease!important
}

a {
color: inherit
}
<!--
A{text-decoration:none
}
-->

</style>  
<center>
 <div class="mandala">
 </div><a target="_blank" href="http://www.forumactif.com" class="add">forumactif.com</a>
</center>

(le id «petal» est pour plus tard on ne fait pas attention)

J'aimerais centrer mon div et, à la fois, le garder fixé au bas de la fenêtre. Ensuite, les menus vont apparaître avec survole sur les pétales.

Est-ce que quelqu'un pourrait m'expliquer ce que je fais de pas correct s'il vous plaît?

Merci!

[MlleAlys]

Bonjour,
Les marges auto ne fonctionnent pas en position absolue ou fixe. Vous pouvez cependant utiliser l'astuce suivante pour un élément qui a une largeur fixe : le décaler de 50% de la largeur de l'écran, mais comme c'est le début de l'élément qui se retrouve au milieu, utiliser une marge dans l'autre sens de la moitié de la largeur de l'élément. Ce qui donne pour .mandala :

Code:

.mandala {
  background-image: url(https://image.noelshack.com/fichiers/2018/32/6/1534015960-alice-ttest.png);
  width: 500px;
  height: 300px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left :-250px;
}

[BoogyLou]

oh wow ça marche! merci ce sujet peut être archivé!!