Hey there! I'm working on creating a video list. I've utilized the bootstrap grid system to put it together. Here's the code I have so far: I'm trying to center the play button both vertically and horizontally within the thumbnail. Any suggestions on how I can update the code?
.test {
width: 100%;
background: #f5f5f5;
border: 1px solid #e5e5e5;
position: relative;
}
.quick-img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.kkk {
position: absolute;
z-index: 1;
top: 25%;
left: 45%;
font-size: 60px;
opacity: 0.6;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}<script src="//cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-12 ">
<div class="test">
<a href="//google.com">
<img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" />
<button class="kkk glyphicon glyphicon-play"></button>
</a>
<h2 style=" word-break: break-all;
word-wrap: break-word;">title test</h2>
</div>
</div>
<div class="col-lg-6 col-sm-12 ">
<div class="test">
<a href="//google.com">
<img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" />
<button class="kkk glyphicon glyphicon-play"></button>
</a>
<h2 style=" word-break: break-all;
word-wrap: break-word;">title test</h2>
</div>
</div>
<div class="col-lg-6 col-sm-12 ">
<div class="test">
<a href="//google.com">
<img class="quick-img" src="http://imgs.aixifan.com/content/2017_10_02/1509609180.png" />
<button class="kkk glyphicon glyphicon-play"></button>
</a>
<h2 style=" word-break: break-all;
word-wrap: break-word;">title test</h2>
</div>
</div>
</div>
</div>Hello Friend! I'm in the process of creating a video list. I've utilized the bootstrap grid system to put it together. Here's my code I'm looking to center the play button both vertically and horizontally within the thumbnail. Any advice on how to adjust the code?