简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Zentrieren Sie das Bild, wenn andere Bilder nicht sichtbar sind
P粉038161873
P粉038161873 2024-03-20 10:03:26
0
1
392

Ich versuche, eine einfache Benutzeroberfläche in HTML zu erstellen.

Wenn ein Div nicht sichtbar ist, sollten die anderen Divs um die anderen Divs herum zentriert sein, aber das passiert nicht.

Wenn alles anzeigen

Wenn 2 Divs nicht sichtbar sind

Mein CSS und 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>

Ich habe versucht, ein paar Overflow-Sachen zu machen, aber nichts hat bei mir funktioniert. Das Ändern relativer Positionen und anderer Positionen führt zu seltsamen Dingen.

Wie Sie sehen können, ist es nicht zentriert. Ich kenne mich mit der Zentrierung in CSS nicht so gut aus, also schreibe ich hier xD

P粉038161873
P粉038161873

Antworte allen(1)
P粉057869348
P粉0578693482024-03-21 00:07:19 1 Etage

您的标记或样式没有任何问题；设置 visibility: none 时，您的元素不会从正常文档流中删除。该元素仍然存在，只是不可见。尝试使用 display: none 代替。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！