html - 在CSS中水平对齐元素并限制滚动空间

Question

我有一些带有某些元素的面板。会有logo+标签，横向排列。如果有overflow-x，就会出现滚动条。如果我只放置标签，所有元素都会对齐。但是如果我插入图像，它们将不再垂直对齐。为什么？

CSS代码:

body {
  	font-family: "Open Sans", Helvetica, sans-serif; 
	color: #89867e;
	background: #f9f9f9;
}
.wrapper {
	margin: 20px;
	padding: 2em;
	list-style: none;
	font-size: 1.5em;
	font-weight: 300;
	max-height: 388px; 
	white-space: nowrap;
	overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; 
    background-color: #ccc;
    margin-bottom:25px;
}

.internal {
 	display: inline; 
	height: 164px;
	padding: .4em 1em;	
	border: 2px solid rgba(255,255,255,0.1);
	-webkit-border: 2px solid rgba(255,255,255,0.1);
	-moz-border: 2px solid rgba(255,255,255,0.1);
	-o-border: 2px solid rgba(255,255,255,0.1);
	color: rgba(249, 249, 249, .9);
	text-decoration: none;
	font-size: 1.5em;
	font-weight: 300;
	margin-right: 18px;
}
 

.wrapper a:nth-child(6n+1) { background: #e87352; }

.wrapper a:nth-child(6n+2) { background: #ebc85e; }

.wrapper a:nth-child(6n+3) { background: #3bbec0; }

.wrapper a:nth-child(6n+4) { background: #4ad585; }

.wrapper a:nth-child(6n+5) { background: rgb(27, 54, 71); }

.wrapper a:nth-child(6n+6) { background: rgb(21, 40, 54); }
 

.wrapper:nth-child(6n+1) { background: rgb(208, 101, 3); }

.wrapper:nth-child(6n+2) { background: rgb(233, 147, 26); }

.wrapper:nth-child(6n+3) { background: rgb(22, 145, 190); }

.wrapper:nth-child(6n+4) { background: rgb(22, 107, 162); }

.wrapper:nth-child(6n+5) { background: rgb(27, 54, 71); }

.wrapper:nth-child(6n+6) { background: rgb(21, 40, 54); }

.trasparente {
 	background: transparent !important;
	padding: 0;
	border:none;
}

.logo {
	max-width: 318px;
	vertical-align: middle;
	margin-right: 18px;
}

<div class="wrapper">
  <a href="#" class="internal trasparente"><img src="https://upload.wikimedia.org/wikipedia/bar/8/86/744px-Siemens-logo_svg.png" class="logo" style="margin-top:20px" alt="logo"></a>
  <a href="" class="internal">item 1</a>
  <a href="" class="internal">item 2</a>
  <a href="" class="internal">item 3</a>
  <a href="" class="internal">item 4</a>
  <a href="" class="internal">item 5</a>
  <a href="" class="internal">item 6</a>
  <a href="" class="internal">item 7</a>
  <a href="" class="internal">item 8</a>
  <a href="" class="internal">item 9</a>
  <a href="" class="internal">item 10</a>
  <a href="" class="internal">item 11</a>
  <a href="" class="internal">item 12</a>
  <a href="" class="internal">item 13</a>
  <a href="" class="internal">item 14</a>
  <a href="" class="internal">item 15</a>
  <a href="" class="internal">item 16</a>
  <a href="" class="internal">item 17</a>
  <a href="" class="internal">item 18</a>
  <a href="" class="internal">item 19</a>
  <a href="" class="internal">item 20</a>
  <a href="" class="internal">item 21</a>
  <a href="" class="internal">item 22</a>
  <a href="" class="internal">item 23</a>
  <a href="" class="internal">item 24</a>
  <a href="" class="internal">item 25</a>
  <a href="" class="internal">item 26</a>
  <a href="" class="internal">item 27</a>
  <a href="" class="internal">item 28</a>
  <a href="" class="internal">item 29</a>
  <a href="" class="internal">item 30</a>
</div>
<div class="wrapper">
    <a href="#" class="internal trasparente"><img src="http://www.asborsoniww.com/media/tes_logo.png" class="logo" style="margin-top:20px" alt="logo"></a>
  <a href="" class="internal">item 1</a>
  <a href="" class="internal">item 2</a>
  <a href="" class="internal">item 3</a>
  <a href="" class="internal">item 4</a>
  <a href="" class="internal">item 5</a>
  <a href="" class="internal">item 6</a>
  <a href="" class="internal">item 7</a>
  <a href="" class="internal">item 8</a>
  <a href="" class="internal">item 9</a>
  <a href="" class="internal">item 10</a>
  <a href="" class="internal">item 11</a>
  <a href="" class="internal">item 12</a>
  <a href="" class="internal">item 13</a>
  <a href="" class="internal">item 14</a>
  <a href="" class="internal">item 15</a>
  <a href="" class="internal">item 16</a>
  <a href="" class="internal">item 17</a>
  <a href="" class="internal">item 18</a>
  <a href="" class="internal">item 19</a>
  <a href="" class="internal">item 20</a>
  <a href="" class="internal">item 21</a>
  <a href="" class="internal">item 22</a>
  <a href="" class="internal">item 23</a>
  <a href="" class="internal">item 24</a>
  <a href="" class="internal">item 25</a>
  <a href="" class="internal">item 26</a>
  <a href="" class="internal">item 27</a>
  <a href="" class="internal">item 28</a>
  <a href="" class="internal">item 29</a>
  <a href="" class="internal">item 30</a>
</div>
<div class="wrapper">
  <a href="" class="internal">item 1</a>
  <a href="" class="internal">item 2</a>
  <a href="" class="internal">item 3</a>
  <a href="" class="internal">item 4</a>
  <a href="" class="internal">item 5</a>
  <a href="" class="internal">item 6</a>
  <a href="" class="internal">item 7</a>
  <a href="" class="internal">item 8</a>
  <a href="" class="internal">item 9</a>
  <a href="" class="internal">item 10</a>
  <a href="" class="internal">item 11</a>
  <a href="" class="internal">item 12</a>
  <a href="" class="internal">item 13</a>
  <a href="" class="internal">item 14</a>
  <a href="" class="internal">item 15</a>
  <a href="" class="internal">item 16</a>
  <a href="" class="internal">item 17</a>
  <a href="" class="internal">item 18</a>
  <a href="" class="internal">item 19</a>
  <a href="" class="internal">item 20</a>
  <a href="" class="internal">item 21</a>
  <a href="" class="internal">item 22</a>
  <a href="" class="internal">item 23</a>
  <a href="" class="internal">item 24</a>
  <a href="" class="internal">item 25</a>
  <a href="" class="internal">item 26</a>
  <a href="" class="internal">item 27</a>
  <a href="" class="internal">item 28</a>
  <a href="" class="internal">item 29</a>
  <a href="" class="internal">item 30</a>
</div>

并且有可能限制 scroll-x 的长度，并在每个面板“包装器”的末尾(在刚从滚动条移除的空间中)添加一个向右箭头(或任何其他元素)？

Answer 1

为什么不使用如下所示的 Bootstrap 组件？

http://www.bootply.com/d1xV5UTiqv

http://www.bootply.com/DKihet1ZM9

http://www.w3schools.com/bootstrap/bootstrap_carousel.asp