Question

我正在尝试这样做，当用户将鼠标悬停在不再有库存的商品上时，它会向图片显示消息覆盖图片，表示不再有库存。这当前工作，但我似乎无法让文本浮动在块的绝对中心。它漂浮在图像中心的顶部。

这是HTML

<div class="store_no_stock_sizer">
        <img src="/com/img/products/1.png" alt="Image">
</div>
<div class="store_page_product_title">Test Item</div>
<p>Out of Stock</p>

和我用来覆盖图片的CSS

.store_no_stock_sizer {
        display: inline-block;
        position: relative;
}
.store_no_stock_sizer:after {
        opacity: 0;
}
.store_no_stock_sizer:hover:after {
        max-width: 100%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        outline: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 99%;
        display: block;
        position: absolute;
        background: #000;
        color: #FFF;
        opacity: 0.7;
        content: "OUT OF STOCK";
}

现在这可以工作但是当它们悬停在图像顶部而不是图像的中心时，它会在图像的顶部显示文本。我会使用填充等，但由于它是一个响应式页面和图像，我不想要一个严格的填充设置。

Answer 1

您可以使用display: flex动态居中文字，

还使用align-items: center;和justify-content: center;

像这样：

.store_no_stock_sizer:hover:after {
        max-width: 100%;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        outline: none;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 99%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: #000;
        color: #FFF;
        opacity: 0.7;
        content: "OUT OF STOCK";
}

Answer 2

<p>标记主要用于文章和内容，如果您需要显示错误，您可能想要使用<span>标记，这样就像：

<span id="error">Your error goes here.</span>

的CSS：

#error{
    width:100%;
    text-align:center;
    // Or you could use an absolute position and manually set the top and left position of the tag
}

使用css和中心文字覆盖图像上的颜色

2 个答案: