在uikit疊加層上垂直對齊文本

我有以下代碼是帶有可點擊疊加層的圖像。將鼠標懸停在上方時，將顯示文本全名。我遇到的問題是它在疊加層的頂部顯示名稱，而不是在中間。在uikit疊加層上垂直對齊文本

我看不到我的代碼錯在哪裏？

<div class="uk-width-medium-1-3"> 
    <a class="uk-thumbnail uk-overlay-toggle" data-uk-modal="{target:'#modal-ps'}" > 
     <div class="uk-overlay"> 
      <img width="180" height="120" src="images/_sml.jpg" alt=""> 
      <div class="uk-overlay-area"> 
       <div class="uk-overlay-area-content"><b>Full Name</b></div> 
      </div> 
     </div> 
    </a> 

    <div class="uk-display-block uk-text-center uk-margin-remove"> 
     <div id="modal-ps" class="uk-modal"> 
      <div class="uk-modal-dialog"> 
       <a href="" class="uk-modal-close uk-close uk-close-alt"></a> 
       <img width="540" height="360" src="images/lrg.jpg" alt=""> 
       <h3>Full Name</h3> 
       <p>CEO</p> 
      </div> 
     </div> 
    </div> 
</div>

來源

2015-11-05 Nathan

看起來好像沒什麼問題，你可以看到「全名」格爲中心覆蓋

<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css" /> 
 
<div class="uk-width-medium-1-3"> 
 
    <a class="uk-thumbnail uk-overlay-toggle"> 
 
     <div class="uk-overlay"> 
 
      <img src="http://placehold.it/180x120"> 
 
      <div class="uk-overlay-area"> 
 
       <div class="uk-overlay-area-content"><b>Full Name</b></div> 
 
      </div> 
 
     </div> 
 
    </a> 
 

 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/js/uikit.min.js"></script>

來源

2015-12-04 11:04:06

在uikit疊加層上垂直對齊文本

回答

相關問題