css Kreis mit Text überlagert auf einem Bild

Question

Ich versuche, einen Kreis über ein quadratisches Bild zu überlagern. Der Text muss horizontal und vertikal im Kreis zentriert sein.

Ich habe es fast mit einem quadratischen div, aber sobald ich ein Bild in den Mix, der Kreis bewegt sich unter dem Bild.

Mein Code.

.Container { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.Square { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
} 
 

 
.Square img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.Circle { 
 
    position: relative; 
 
    height: 70%; 
 
    width: 70%; 
 
    top: 15%; 
 
    left: 15%; 
 
    background-color: rgba(0, 0, 200, 0.5); 
 
    border-radius: 50%; 
 
    /*80px;*/ 
 
    margin-bottom: 50%; 
 
    /*30px; */ 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 

 
.Circle h3 { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 30%; 
 
    margin: auto; 
 
    text-align: center; 
 
}

<div class="Container"> 
 
    <div class="Square"> 
 
    <img src="SiteData/Images/ProfilePics/ProfileImg.png" /> 
 

 
    <div class="Circle"> 
 
     <h3>Words Here</h3> 
 
    </div> 
 
    </div> 
 
</div>

Der Container wird letztlich mit variabler Breite sein, durch Bootstrap-col bestimmt

Answer 1

Da Sie Ihren Kreis auf das Bild positionieren wollen, müssen Sie position: absolute statt relativ zu verwenden. Dadurch wird es aus dem Dokumentfluss entfernt und Sie können es innerhalb des übergeordneten Elements beliebig positionieren.

Damit dies funktioniert, müssen Sie auch position: relative auf dem übergeordneten Element deklarieren.

Siehe Proof-of-Concept-Beispiel unten:

.Container { 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.Square { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: yellow; 
 
    position: relative; /* To allow children to be absolutely positioned */ 
 
} 
 

 
.Square img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.Circle { 
 
    position: absolute; /* Use absolute positioning */ 
 
    height: 70%; 
 
    width: 70%; 
 
    top: 15%; 
 
    left: 15%; 
 
    background-color: rgba(0, 0, 200, 0.5); 
 
    border-radius: 50%; 
 
    /*80px;*/ 
 
    margin-bottom: 50%; 
 
    /*30px; */ 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 

 
.Circle h3 { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 30%; 
 
    margin: auto; 
 
    text-align: center; 
 
}

<div class="Container"> 
 
    <div class="Square"> 
 
    <img src="SiteData/Images/ProfilePics/ProfileImg.png" /> 
 

 
    <div class="Circle"> 
 
     <h3>Words Here</h3> 
 
    </div> 
 
    </div> 
 
</div>