スタイルを維持しながらテキストを中央にしよう

Question

OK、私はブートストラップを使用していて、テキストが入ったサムネイルボックスをいくつか持っています（コードを参照）。

は私も垂直方向と水平方向のテキストを揃えたい、私はflexboxを使用してこれを行ってきた、これはしかし、今span、h4とpタグはすべて同じ行にではなく、stackedあり、動作しているようです。

これを修正する最も良い方法は、stackedのタグを取得するだけでなく、水平と垂直の両方を中心にしています。

HTML

<div class="col-md-3 overlord-thumbnail"> 
    <div class="thumbnail"> 
     <a href="#tab4" data-toggle="tab"> 
      <div class="caption"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
       <h4>Latest News</h4> 
       <p>text here</p> 
      </div> 
     </a> 
     <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
     <h4> Latest News</h4> 
     <p>text here</p> 
    </div> 
</div> 

CSS

.overlord-thumbnail { 
    height: 188px; 
    overflow-y: hidden; 
    overflow-x: hidden; 
} 

.thumbnail { 
    background: whitesmoke; 
    border-radius: 0; 
    height: 100%; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: inline-flex; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -moz-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
} 

.caption { 
    position:absolute; 
    top:-100%; 
    right:0; 
    background: rgba(66, 139, 202, 0.64); 
    width:100%; 
    height:100%; 
    padding:2%; 
    text-align:center; 
    color:#fff !important; 
    z-index:2; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 
.thumbnail:hover .caption { 
    top:0; 
} 

現在

は

Answer 1

問題は、デフォルトのスタイルは、あなたが適用されるスタイルをオーバーライドしているということであるべきです。優先するには.overlord-thumbnail>.thumbnailを使用してください。

また、それらを積み重ねて互いに隣り合わせに並べるのではなく、flex-direction:column;を使用する必要があります。

.overlord-thumbnail { 
 
    height: 188px; 
 
    overflow-y: hidden; 
 
    overflow-x: hidden; 
 
} 
 

 
.overlord-thumbnail>.thumbnail{ 
 
    background: whitesmoke; 
 
    border-radius:0; 
 
    width:100%; 
 
    height: 100%; 
 
    display:flex; 
 
    flex-direction:column; 
 
    align-items:center; 
 
    justify-content:center; 
 
    text-align:center; 
 
} 
 

 
.caption { 
 
    position:absolute; 
 
    top:-100%; 
 
    right:0; 
 
    background: rgba(66, 139, 202, 0.64); 
 
    width:100%; 
 
    height:100%; 
 
    padding:2%; 
 
    text-align:center; 
 
    color:#fff !important; 
 
    z-index:2; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    -ms-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
    
 
} 
 
.thumbnail:hover .caption { 
 
    top:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="col-md-3 overlord-thumbnail"> 
 
     <div class="thumbnail"> 
 
      <a href="#tab4" data-toggle="tab"> 
 
       <div class="caption"> 
 
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
 
        <h4>Latest News</h4> 
 
        <p>text here</p> 
 
       </div> 
 
      </a> 
 
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
 
      <h4> Latest News</h4> 
 
      <p>text here</p> 
 
     </div> 
 
    </div>