Question

我有以下代码，这是一个带有可点击覆盖的图像。将鼠标悬停在其上时会显示文本全名。我遇到的问题是它在叠加层的顶部显示名称，而不是在中间。

我无法看到我的代码出错的地方？

<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>

Answer 1

对我来说很好看，因为你可以看到＆＃34;全名＆＃34; div以叠加为中心

＆＃13;

<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>

＆＃13;

垂直对齐uikit叠加层上的文本

1 个答案: