How to always have slide image centered? - html

Question

current state of my carousel
I'm trying to code the slide carousel of my website, so no matter what image I upload for the slides, images will always be centered no matter what(currently only centers image if it is a specific resolution).
I have tried calling the class in CSS and centering the margin that way, but its still not working. Here is my code so far:
I called specific slide item class in CSS, updated margin, image still not centered.
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-control>.fa {
font-size: 40px;
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
margin-top: -20px;
}
.item {
margin: 0px auto; // center
width: 1100px;
height: 500px;
text-align: center;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="First slide" text-align="center">
</div>
<div class="item">
<img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Second slide" text-align="center">
</div>
<div class="item">
<img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Third slide" text-align="center">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>

Answer 1

First of all, you have an invalid CSS comment, that might cause some trouble as well, the right way to comment in CSS is using /* comment */
Next, lets take a look at your attemp of centering things
.item {
margin: 0px auto; /* center */
width: 1100px;
height: 500px;
text-align: center;
}
In theory, this would work, but we need to know what we are centering, which is in this case the whole slide, not its contents (which you probably want to center)
So the quickest solutions here might be the following
.item img {
margin: 0 auto;
}
This is the same way as you tried, but applied on the correct element that needs to be centered -> the content of your slide.
More 'robust' way of centering would be setting your slide to display: flex and using flexbox to center your stuff.
Try it this way
.item {
width: 1100px;
height: 500px;
display: flex;
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
}
Try those out and let me know!