Struggling to align the captions of an image carousel at the bottom of the <ul>. No matter what I try, it just doesn't look right.
Check out my Fiddle here
Below is the HTML structure:
<div class="carousel">
<ul>
<li>
<img src="someImage.jpg">
<span class="caption">Some Caption</span>
</li>
<li>
<img src="someImage.jpg">
<span class="caption">Some Caption</span>
</li>
</ul>
</div>
This is my CSS styling:
.carousel img {
max-height: 200px;
max-width: 200px;
vertical-align: middle;
}
.carousel li {
display: inline-block;
padding: 5px;
position: relative;
cursor: pointer;
width: 200px;
height: 200px;
text-align: center;
-webkit-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
-moz-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
-ms-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
-o-transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
transition: all 0.1s cubic-bezier(.91, .8, 0, 1);
}
.carousel .caption {
display: block;
position: absolute;
bottom: 10px;
text-align: center;
background-color: rgba(240,240,240,0.75);
font-weight: bold;
font-size: 12px;
padding: 5px 0 5px 0;
width: 200px;
max-width: 200px;
}