我需要制作几个带有居中 Logo 图像的框。我尝试使用填充来做到这一点,只需将图像放在列中,将其居中并添加顶部和底部填充。但问题是,我将在网格内放置一些具有不同尺寸图像的方框,最终看起来会很乱。我还有其他方法可以做到这一点吗?
这是我要制作的盒子的图片:
这是我的代码的粗略轮廓:
.col-lg-6 {
background-color: #8dc63f;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-lg-6">
<img src="http://via.placeholder.com/200x100">
</div>
最佳答案
您可以将相对/绝对位置配对与过渡设置结合使用,如以下代码段所示:
.col-lg-6 {
background-color: #8dc63f;
position: relative;
height: 200px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="col-lg-6">
<img src="http://via.placeholder.com/200x100">
</div>
关于html - 正方形列中的中心图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44359926/