<ch5-list id="demo-list-1"
size="25"
orientation="horizontal"
indexId="idx"
minWidth="250px"
maxWidth="500px"
minHeight="100px"
maxHeight="150px"
itemWidth="125px"
itemHeight="75px"
scrollbar="true"
gestureable="true"
pagedSwipe="true"
endless="true">
<template>
<div class="horizontal-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
.horizontal-list-item {
border: 1px solid transparent;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
padding: 10px;
display: table;
width: 100%;
height: 100%;
}
.horizontal-list-item span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<ch5-list id="demo-list-2"
size="50"
orientation="vertical"
indexId="idx"
minWidth="150px"
maxWidth="165px"
minHeight="300px"
maxHeight="550px"
itemWidth="150px"
itemHeight="75px"
scrollbar="true"
gestureable="true"
pagedSwipe="true"
endless="true">
<template>
<div class="vertical-list-item">
<span>item_{{idx}}</span>
</div>
</template>
</ch5-list>
.vertical-list-item {
border: 1px solid transparent;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
padding: 10px;
display: table;
width: 100%;
height: 100%;
}
.vertical-list-item span {
display: table-cell;
vertical-align: middle;
text-align: center;
}