在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>
答
看起来好像没什么问题,你可以看到 “全名” 格为中心覆盖
<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>