在CSS中水平对齐项目并限制滚动的空间

Question

我有一些面板有一些项目。将有水平排列的徽标+标签。如果有溢出-x，则会出现滚动条。如果我只放置标签，则所有元素都对齐。但是如果我插入图像，它们就不再垂直对齐。为什么呢？

CSS 代码：

html_entity_decode

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

并且有可能限制scroll-x的长度，并在每个面板“wrapper”的末尾（在刚刚删除到滚动的空间中）添加一个右箭头（或任何其他元素）？ / p>

Answer 1

为什么不使用 Bootstrap 组件，例如以下那些？

http://www.bootply.com/d1xV5UTiqv

http://www.bootply.com/DKihet1ZM9

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