Question

使用JavaScript我用包装器包装图像，并在右下角添加一个叠加元素。问题在于，当我定义CSS以确保叠加在参考图像时正确定位时，我会丢失中心或右对齐。

我可以修改CSS和JavaScript但不能修改HTML。

我也不能假设图像的宽度，并且不希望使用JS来测量这些宽度，以使所有内容尽可能轻，并且不会干扰较大项目中的任何媒体查询。

我创建了一个快速的jsFiddle来更好地解释问题： https://jsfiddle.net/terriann/p220ddet/6/

已解决请参阅小提琴：http://jsfiddle.net/terriann/p220ddet/11/

HTML输出示例（如果我链接到jsfiddle ，因为SO需要代码）

<div class="wrapper aligncenter"> <img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter wrapme" style="width:300px"> <div class="countbox">View Details</div> </div> <div class="wrapper alignright"> <img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright wrapme" style="width:300px"> <div class="countbox">View Details</div> </div>

CSS

.aligncenter { display: block; margin-right: auto; margin-left: auto; } .alignleft { display: block; margin-right: auto; margin-left: 0; } .alignright { display: block; margin-right: 0; margin-left: auto; } .wrapper { position: relative; display: inline-block; } .countbox { position: absolute; bottom: 10px; right: 10px; background-color:#fff; padding:10px; }

我确信之前已经回答过，但之前的搜索无法找到答案，因为涉及的关键字过多：/

澄清目标：

浮动框应叠加在图像的右下角

图像本身应保持与未添加叠加层时相同的水平对齐方式。

原始图像仍应保留其对齐，同时不使用类nowrap对图像应用任何包装（如果需要，可以应用不同的名称来对齐包装的图形）

这是一张澄清图片：

Answer 1

您不应在<div>标记内使用<p>，why?我将其更改为<span>。
我稍微调整了jQuery，将对齐类添加到父<p>标记。
以及一些CSS更新如下。

$(document).ready(function () {
    // has "view details" box
    $('img.wrapme').each(function () {
        $(this).wrap('<span class="wrapper"></span>');
        if ($(this).hasClass('alignright')) {
            $(this).parent().parent().addClass('alignright');
        } else if ($(this).hasClass('aligncenter')) {
            $(this).parent().parent().addClass('aligncenter');
        } else if ($(this).hasClass('alignleft')) {
            $(this).parent().parent().addClass('alignleft');
        }
        $(this).parent().append('<span class="countbox">View Details</span>');
    });
    // no  "view details" box
    $('img.nowrap').each(function () {
        $(this).wrap('<span class="wrapper"></span>');
        if ($(this).hasClass('alignright')) {
            $(this).parent().parent().addClass('alignright');
        } else if ($(this).hasClass('aligncenter')) {
            $(this).parent().parent().addClass('aligncenter');
        } else if ($(this).hasClass('alignleft')) {
            $(this).parent().parent().addClass('alignleft');
        }
    });
});

.wrapper {
    position: relative;
    display: inline-block;
}
.aligncenter {
    text-align: center;
}
.alignleft {
    text-align: left;
}
.alignright {
    text-align: right;
}
.countbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h3>Center Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter wrapme" style="width:300px"></p>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="aligncenter nowrap" style="width:300px"></p>
<h3>Left Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft wrapme" style="width:300px"></p>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignleft nowrap" style="width:300px"></p>
<h3>Right Align</h3>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright wrapme" style="width:300px"></p>
<p><img src="https://farm4.staticflickr.com/3305/3493791131_cbfb113360.jpg" alt="Puppy" class="alignright nowrap" style="width:300px"></p>
<p><a href="https://www.flickr.com/photos/fanz/3493791131" title="Puppy by Francois de Halleux, on Flickr">Photo by Francois de Halleux via Flickr (Creative Commons by-nc-nd)</a></p>

小提琴演示： http://jsfiddle.net/tu374zy5/

Answer 2

DEMO

将top: 50%; left: 50%; transform: translate(-50%,-50%）添加到.countbox。

.countbox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background-color:#fff;
      padding:10px;
 }

将元素定位在其上的元素居中而不知道宽度

2 个答案: