ブートストラップを使用してボタンを中央に配置するにはどうすればよいですか？

Question

友人！ 私はビデオリストを作成しています。 私はそれを作成するブートストラップグリッドシステムを使用します。 これは私のコードです ボタンを上下左右に中央のサムネイルで再生したいです。 コードを変更するには？ HI 友人

.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>

！ 私はビデオリストを作成しています。 私はそれを作成するブートストラップグリッドシステムを使用します。 これは私のコードです ボタンを上下左右に中央のサムネイルで再生したいです。 コードを変更するには？あなたのCSSに追加

Answer 1

は試してみてください。

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

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

Answer 2

試してみてください。あなたのCSSにこれを追加すること

.kkk 
{ 
    padding-top:50px; 
}