如何使用Bootstrap将按钮居中？

Question

friend! I am create a video list. I use bootstrap grid system create it. This is my code I want to play button vertically and horizontally centere in the middle thumbnail. How to modify 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> 

HI friend! I am create a video list. I use bootstrap grid system create it. This is my code I want to play button vertically and horizontally centere in the middle thumbnail. How to modify the code?

Answer 1

Try adding to your css:

.kkk  
{
    padding-top:50px;
}

Answer 2

Try adding this to your CSS:

.test a { display: block; position: relative; }

button.kkk { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }