方形列中的中心图像

-1

我需要制作几个带有居中标识图像的框。我试着用填充来做，只是在一列中放置一个图像，居中并添加顶部和底部填充。但事情是，我会在网格中放置几个具有不同大小图像的框，最终看起来很乱。有没有另外一种方法可以做到这一点？方形列中的中心图像

这里是我试图让该箱子的一个形象：

下面是我的代码的粗线条：

.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>

来源

2017-06-04 Retros

你有没有考虑过这个？没有充分的答案 http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ – damanptyltd

你可以使用相对/绝对位置与转换设置配对，如以下片段所示：

.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>

来源

2017-06-04 23:55:23 Johannes

方形列中的中心图像

回答

相关问题