Customize Boostrap 3 carousel - html

Question

I changed the bootstrap carousel default settings from the default chevron-left to menu-left and right. and I added image links. i changed the default height to 270px and change it to container.
My issue is that the arrows float to the top as well as the image links, also when they scroll through the links the links scroll past the arrows when changing.
#carousel-wrap {
background-color: #0b0b0b;
height: 270px;
}
.carousel-control.left, .carousel-control.right{
background: none !important;
filter: progid:none !important;
}
<section id="carousel-wrap">
<div id="carousel1" class="carousel slide container" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="resources/media/referrals/hub-logo.png" alt="First slide image" class="center-block">
</div>
<div class="item">
<img src="resources/media/referrals/hub-logo.png" alt="Second slide image" class="center-block">
</div>
<div class="item">
<img src="resources/media/referrals/hub-logo.png" alt="Third slide image" class="center-block">
</div>
<div class="item">
<img src="resources/media/referrals/hub-logo.png" alt="Third slide image" class="center-block">
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
</section>

Answer 1

To center arrows vertically you can use line-height property (height of your carousel):
.carousel-control.left,
.carousel-control.right {
background: none !important;
line-height: 270px;
}
For image you can use this technique:
.item {
height: 270px;
}
.item img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}