gpt4 book ai didi

html - div 中的中心图标 - 水平和垂直

转载 作者:技术小花猫 更新时间:2023-10-29 11:48:39 24 4
gpt4 key购买 nike

<分区>

我在将父 div 中的图标(垂直和水平)居中时遇到问题。我的页面上有许多大小不同的父 div,因此我希望能够按比例将图标放置在每个父 div 的中心。这是问题的 JSFiddle:

JsFiddle

HTML

<div class="img_container">
<i class="icon-play-circle"></i>
</div>
<br>
<div class="img_container2">
<i class="icon-play-circle"></i>
</div>

CSS

.img_container{
width:100px;
height:100px;
position:relative;
background:red;
}

.img_container2{
width:100px;
height:50px;
position:relative;
background:blue;
}

.icon-play-circle{
position:absolute;
top:45%;
left:45%;
color: white;
}

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com