J'essaie de créer une interface utilisateur simple en HTML.
Si un div n'est pas visible, les autres div devraient être centrés autour des autres div, mais cela n'arrive pas.
Si afficher tout
Si 2 divs ne sont pas visibles
Mes CSS et HTML :
.playerStats{
position: absolute;
bottom: 2px;
left: 50%;
transform: translate(-50%, -50%);
}
.hud {
width: 300px;
left: -15px;
/* potrzebne */
display: flex;
position: relative;
justify-content: space-between;
transition: all 1s ease;
}
.stat {
border-radius: 50%;
max-height: fit-content;
max-width: fit-content;
position: relative;
overflow: hidden;
padding: 2rem;
background: rgb(20, 20, 20, 0.3);
box-shadow: 0px 0px 15px rgb(0, 0, 0);
transition: all 1s ease;
transition: visibility 0.2s;
transition: opacity 0.2s;
}
.hud .stat img {
width: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease;
transition: visibility 0.2s;
transition: opacity 0.2s;
}
.hud .stat .bg {
height: 100%;
width: 100%;
left: 0;
position: absolute;
bottom: 0;
box-shadow: 15px 15px 15px 15px rgb(115, 0, 230);
transition: all 1s ease;
transition: visibility 0.2s;
transition: opacity 0.2s;
}
<body>
<div class="playerStats">
<div class="hud">
<div class="stat" id="hp-stat">
<div class="bg" id="hp" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/hp.png">
</div>
<div class="stat" id="panc-stat">
<div class="bg" id="panc" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/panc.png">
</div>
<div class="stat" id="pluca-stat">
<div class="bg" id="pluca" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/pluca.png">
</div>
<div class="stat" id="glos-stat">
<div class="bg" id="glos" style="background-color: rgb(115, 0, 230)"></div>
<img src="res/glossredni.png">
</div>
</div>
</div>
</body>
J'ai essayé de faire des trucs de débordement mais rien n'a fonctionné pour moi. Changer les positions relatives et d'autres positions fait des choses étranges.
Comme vous pouvez le constater, ce n'est pas centré. Je ne connais pas grand chose en matière de centrage en CSS donc j'écris ici xD
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Rien de mal avec votre balisage ou votre style
visibility: none时，您的元素不会从正常文档流中删除。该元素仍然存在，只是不可见。尝试使用display: noneà la place.