コンテナ内のテキストよりも大きい画像を含む中央のテキスト

Question

何らかの理由により、ボタンが画像の先頭に貼り付いています。私はそれをコンテナの中央に集中させたい。私は、 "センター" クラスでそれを中央しようとしています：

position: relative; 
top: 50%; 
transform: translateY(-50%); 

コード：それは今のように見える何

：

それはどのように見えるか：

HTML：

<div style="background-image: url('./dist/img/background/minecraft.jpg'); height: 125px;" class="col-md-12"> 

    <div class="wrapper text-center center"> 

     <div class="col-lg-5"> 

      <span style="color: #FFFFFF; font-size: 220%;"> 

       <img style="width: 100px; display: inline;" src="./dist/img/icon/minecraft.png" /> 

       Minecraftasdasdsad 

      </span> 

     </div> 

     <div class="col-lg-3"></div> 

     <div class="row"> 

      <div class="col-lg-4"> 

       <button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green"> 

        Start 

       </button> 

       <button style="margin-left: 10px; color: #FFFFFF; min-width: 100px;" class="btn btn-red"> 

        Stop 

       </button> 

      </div> 

     </div> 

    </div> 

</div> 

Answer 1

これはflexboxを使った実装です。

#center { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
}

<div style="background-image: url('https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg'); height: 125px;" class="col-md-12"> 
 
<div class="wrapper text-center center"> 
 
    <div class="col-lg-5"> 
 
    <span style="color: #FFFFFF; font-size: 220%;"> 
 
    <img style="width: 100px; display: inline;" src="https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg" /> 
 
    Minecraftasdasdsad 
 
    </span> 
 
    </div> 
 
    <div class="col-lg-3"></div> 
 
    <div class="row"> 
 
    <div id="center"> 
 
     <button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green"> 
 
     Start 
 
     </button> 
 
     <button style="margin: 10px;color: #FFFFFF; min-width: 100px;" class="btn btn-red"> 
 
     Stop 
 
     </button> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</div>