简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Center image if other images are not visible
P粉038161873
P粉038161873 2024-03-20 10:03:26
0
1
391

I'm trying to make a simple UI in html.

If one div is not visible, the other divs should be centered around the other divs, but this doesn't happen.

If all are displayed

If 2 divs are not visible

My CSS and 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>

I tried doing some overflow stuff but nothing worked for me. Changing relative positions and other positions does weird things.

As you can see, it is not centered. I don't know a lot of centering stuff in css so I'm writing here xD

P粉038161873
P粉038161873

reply all(1)
P粉057869348
P粉0578693482024-03-21 00:07:19 1 floor

There's nothing wrong with your markup or styling; when setting visibility: none, your element will not be removed from the normal document flow. The element is still there, just invisible. Try using display: none instead.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！