Question

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>

Answer 1

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

让我用flexbox提供方法。 Img包含在Div№3中作为背景。在全屏模式下，您可以看到片段的工作。我应该注意Flexbox格式包含在Bootstrap 4中。我想我的决定对你有用。

Answer 2

尝试在item7之后将图像放入另一个span标记。它将使图像居中并将采用图像的自动尺寸。

<span class="list-group-item center-block ">
   <img class="img-circle " src="img/img.jpg"  >
</span>

左右两个div。左边是短的，所以下面是空白区域。用图片填充。

2 个答案: