Выровняйте элементы карусели совы по центру

Я использую карусель совы, в которой изображения берутся через PHP, поэтому я не могу предсказать количество элементов в ней, и я использую карусель, которая содержит 10 элементов (элементов: 10). иногда возвращаемый вывод PHP будет содержать меньшие изображения (1,2,3 ..), в то время как изображение выровнено по левому краю, но я хотел, чтобы оно было в центре. мой код будет следующим

html

<div id = "owl-example" class = "owl-carousel">
 <div><img src = "Images/image1.png class = "br" ></div>
 <div><img src = "Images/image1.png class = "br" ></div>
</div>

Фактический код - это результат, возвращаемый php, здесь я пишу только его html JQuery

$("#owl-example").owlCarousel({
// Most important owl features
items : 10,
itemsDesktop : [1199,4],
itemsDesktopSmall : [980,3],
itemsTablet: [768,2],
itemsTabletSmall: false,
itemsMobile : [479,1],
singleItem : false,

//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,

//Pagination
pagination : true,
paginationNumbers: false,

// Responsive 
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,

// CSS Styles
baseClass : "owl-carousel",
theme : "owl-theme",

//Lazy load
lazyLoad : false,
lazyFollow : true,

//Auto height
autoHeight : false,
autoWidth : true,
loop:true,
center:true,

//JSON 
jsonPath : false, 
jsonSuccess : false,

//Mouse Events
mouseDrag : true,
touchDrag : true,

stagePadding: 50,
loop:true,
margin:10,
nav:true,
//Transitions
transitionStyle : false,

// Other
addClassActive : false,

//Callbacks
beforeInit: false, 
afterInit: false, 
beforeMove: false, 
afterMove: false,
afterAction: false,
startDragging : false
})

CSS

.owl-carousel .owl-wrapper:after {
  content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}
/* display none until init */
.owl-carousel{
 display: none;
 position: relative;
 width: 100%;
 -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
 display: none;
 position: relative;
 -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
 overflow: hidden;
 position: relative;
 width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
 -webkit-transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item{
 float: left;
}
.owl-controls .owl-page,.owl-controls .owl-buttons div{
 cursor: pointer;
}
.owl-controls {
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* fix */
.owl-carousel  .owl-wrapper,.owl-carousel  .owl-item{
 -webkit-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
}