如何垂直和水平方向在zurb基礎列column-block中的圖像對齊文本6

我已經嘗試了很多方法來水平和垂直居中在圖像上的h4標題，這是在列「列塊「的屬性。如何垂直和水平方向在zurb基礎列column-block中的圖像對齊文本6

我確實讓它在第一張圖片上有所作爲，但它沒有響應，我知道它不正確。我無法在網絡上找到解決這一特定問題的任何內容;我很驚訝，很難解決。

這裏是我的代碼（我仍然有一些行內代碼，因爲我一直在嘗試各種選項...）：

CSS：

.event-row { 
    position: absolute; 
    bottom: 58%; 
    max-width: 100%; 
    margin: auto; 
    padding-left: 8%; 
} 

.event-title { 
    position: relative; 
    margin: auto; 
    text-align: center; 
    vertical-align: center; 
    display: inline-block; 
    max-width: 100%; 
}

HTML：

<body> 
    <div class="row small-up-2 medium-up-3 large-up-3" style="position: relative;"> 
     <div class="column column-block"> 
     <img src="assets/events/book-release.jpg" width="600" height="600" class="thumbnail" alt="">   
     <div class="row event-row"> 
      <div class="small-12 columns"> 
       <h4 class="event-title" style="color:white;"> 
       BOOK PARTIES 
       </h4> 
      </div> 
      </div>  
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/tent-event.jpg" width="600" class="thumbnail" alt="">  
     </div> 

     <div class="column column-block"> 
      <img src="assets/index/cooking-class-cu.jpg" width="600" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/index/wedding.jpg" width="600" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/moulin-rouge-cropped.jpg" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/conservatory-lunch-cropped.jpg" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/tea-party-cropped.jpg" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/rehearsal-dinner-cropped.jpg" class="thumbnail" alt=""> 
     </div> 

     <div class="column column-block"> 
      <img src="assets/events/baby-party.jpg" width="600" class="thumbnail" alt=""> 
     </div> 

     </div> <!-- end row --> 
    </div> <!-- end body -->

來源

2017-09-25 Steve Juliusson

如果你將在列中使用圖像，那麼你最好使用position：absolute來表示文本。

基金會有這個

@include absolute-center;

這確實

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

見例如一個mixin： https://codepen.io/rafibomb/pen/qPRVad

來源

2017-09-26 00:04:07 rafibomb

如何垂直和水平方向在zurb基礎列column-block中的圖像對齊文本6

回答

相關問題