[英]Div has image and text elements inside of it, I want the text to be centered absolutely in the center over the image
我已经在下面的代码段中应用了代码。 我的目标是在图像上放置具有召唤者级别的<p>
元素,并将其水平和垂直居中。 可悲的是,我不知道该怎么做,由于某种原因,我在google上找到的代码并没有真正起作用。 我认为这不太难,但是我对绝对定位不太熟悉。
*, *: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>
您可以使用flex对齐/对齐,因为您的容器已设置为display: flex
.summoner-icon-container {
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
你来对了!
您只需添加!
.summoner-level {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
将动态居中
*, *: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>
这对我有用。
.summoner-icon-container {
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.