Bootstrap:我在左边有一个列表，它比右边的表短。结果它看起来很尴尬，我想在左边的列表下面放一张图片来填充列表左边的空白。我想这个图像的中心垂直和水平和比例尽可能好。现在的问题是图像没有居中，也不会居中。
<div class="row-fluid">
<div class="col-md-5">
<p>List</p>
<span class="list-group-item list-group-item-success">Item1</span>
<span class="list-group-item">Item2</span>
<span class="list-group-item list-group-item-success">Item3</span>
<span class="list-group-item">Item4</span>
<span class="list-group-item list-group-item-success">Item5</span>
<span class="list-group-item">Item6</span>
<span class="list-group-item list-group-item-success">Item7</span>
<img class="img-circle" src="img/image.jpg">
</div>
<div class="col-md-6">
<p>Table</p>
<table class="table table-striped table-bordered table-hover">
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
</table>
</div>
</div>
@charset "utf-8";
html {
background: #ccc;
min-height: 100%;
font-family: sans-serif;
font-size: 5px;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
body {
margin: 0;
padding: 15px;
display: -webkit-flex;
display: flex;
flex-direction: column;
flex: auto;
}
.box {
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.box-base {
background: #222;
min-height: 430px;
font-size: 5rem;
color: #eee;
flex: auto;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.box-side {
margin-right: 30px;
display: -webkit-flex;
display: flex;
flex: 0 0 220px;
flex-direction: column;
}
.box-itm {
background: #222;
min-height: 200px;
font-size: 5rem;
color: #eee;
margin-bottom: 0px;
flex: auto;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.box-itm:last-child {
margin-bottom: 0;
}<div class="box">
<div class="box-side">
<div class="box-itm">2 <p>List</p>
<span class="list-group-item list-group-item-success">Item1</span>
<span class="list-group-item">Item2</span>
<span class="list-group-item list-group-item-success">Item3</span>
<span class="list-group-item">Item4</span>
<span class="list-group-item list-group-item-success">Item5</span>
<span class="list-group-item">Item6</span>
<span class="list-group-item list-group-item-success">Item7</span></div>
<div class="box-itm" style="background-image: url('http://www.publicdomainpictures.net/download-picture.php?adresar=10000&soubor=abstract-black-background-29541280862230sD05.jpg');background-size: cover;">3</div>
</div>
<div class="box-base">1 <p>Table</p>
<table class="table table-striped table-bordered table-hover">
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
<tr>
<td class="info">Row</td>
<td class="info">Row</td>
</tr>
</table></div>
</div>
<div></div>让我提供灵活的方法。Img作为背景包含在Div№3中。在全屏模式下，你可以看到一个片段的工作。我应该注意到弹性格式包含在Bootstrap 4中。我想我的决定对你会有帮助。
尝试将您的图像放到item7之后的另一个span标签中。它将图像居中，并将自动调整图像的大小。
<span class="list-group-item center-block ">
<img class="img-circle " src="img/img.jpg" >
</span>