方形列中的中心图像
问题描述:
我需要制作几个带有居中标识图像的框。我试着用填充来做,只是在一列中放置一个图像,居中并添加顶部和底部填充。但事情是,我会在网格中放置几个具有不同大小图像的框,最终看起来很乱。有没有另外一种方法可以做到这一点?方形列中的中心图像
这里是我试图让该箱子的一个形象:
下面是我的代码的粗线条:
.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>
你有没有考虑过这个?没有充分的答案 http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ – damanptyltd