方形列中的中心圖像

-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

方形列中的中心圖像

回答

相關問題