I've applied the code in the snippet below. My goal is to position the <p>
element with class summoner-level over the image and have it centered horizontally and vertically. Sadly I have no clue how and the code I've found on google doesn't really work for some reason. I assume this is not too hard but I'm not too familiar with absolute positioning.
*, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; list-style-type: none; } html { font-size: 16px; } body { background-color: #f2f2f2; font-family: "Helvetica", sans-serif; height: 100%; width: 100%; line-height: 1.8rem; color: #333333; } .summoner-container { display: flex; flex-direction: column; } .summoner-information { display: flex; margin-bottom: 10px; } .summoner-icon-container { display: flex; position: relative; } .summoner-level { position: absolute; } .summoner-icon { max-width: 75px; }
<div class='summoner-container'> <div class='summoner-information'> <div class="summoner-icon-container"> <p class='summoner-level'>150</p> <img class='summoner-icon' v-if='summonerInfo' src="http://ddragon.leagueoflegends.com/cdn/9.13.1/img/profileicon/1250.png" alt=""> </div> </div> </div>
You can use flex alignment/justification since your container is already set to display: flex
.summoner-icon-container {
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
You have come right way!
You just add this!
.summoner-level {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
will be dynamically center
*, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; list-style-type: none; } html { font-size: 16px; } body { background-color: #f2f2f2; font-family: "Helvetica", sans-serif; height: 100%; width: 100%; line-height: 1.8rem; color: #333333; } .summoner-container { display: flex; flex-direction: column; } .summoner-information { display: flex; margin-bottom: 10px; } .summoner-icon-container { display: flex; position: relative; } .summoner-level { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); } .summoner-icon { max-width: 75px; }
<div class='summoner-container'> <div class='summoner-information'> <div class="summoner-icon-container"> <p class='summoner-level'>150</p> <img class='summoner-icon' v-if='summonerInfo' src="http://ddragon.leagueoflegends.com/cdn/9.13.1/img/profileicon/1250.png" alt=""> </div> </div> </div>
This worked for me.
.summoner-icon-container {
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.