Virtuemart 图片中间的图片标题答案

【问题标题】：Virtuemart Image title in the middle of imageVirtuemart 图片中间的图片标题
【发布时间】：2014-06-29 22:26:08
【问题描述】：

我正在尝试将“图像标题”移动到图像中间，但它似乎不起作用。

<div class="product-field product-field-type-R">

        <span class="product-field-display">
            <a title=" Image Title" href="index.php/eshop/category/someproduct-detail">
                <img alt="getimagedpmk4xtm" src="/images/stories/virtuemart/product/resized/getimage_90x90.jpg"></img>

            </a>
        </span>

    </div>

我尝试了各种东西，但直到现在都没有奏效，我最近的尝试是这样的：

.product-field-display a title{vertical-align: middle !important;}

我知道这是错误的，但我无法提醒自己我尝试了哪些其他方法。

【问题讨论】：

您可以使用line-height 并将其设置为与您的图像相同的高度。

标签： php html css joomla virtuemart

【解决方案1】：

您可以像这样使用 CSS3 设置锚标题的样式，这只是悬停时的示例，您现在可以轻松设置样式：

a[title]:hover:after{
    content: attr(title);
    width:100px;
    position:absolute;
    left:10px;
    top:20px;
    word-wrap: break-word;
    z-index: 20px;
}

【讨论】：

【解决方案2】：

您可以将图像设置为您的 div 的背景图像并将文本放置在 div 中。

例如：

<div  style="background-image:/images/stories/virtuemart/product/resized/getimage_90x90.jpg;">
   <span style="margin:10px;">
       <a title=" Image Title" href="index.php/eshop/category/someproduct-detail"/>
   </span>
</div>

这只是在图像中间显示文本的一种简单方法。也请先尝试我的示例代码。我无法检查它的语法。

希望对你有帮助。

【讨论】：