嘗試在保持樣式的同時居中文本

Question

好吧，我很喜歡引導程序，並在裏面放置了一些帶有文本的縮略圖框（請參閱下面的代碼）。

我還要垂直和水平對齊文本，我一直在使用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>