javascript - 在不知道宽度的情况下将元素置于其上的居中

Question

我使用 JavaScript 使用包装器包装图像，并添加一个元素以叠加在右下角。问题是，当我定义 CSS 以确保叠加层相对于图像正确定位时，我失去了居中或右对齐。

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

我也不能假设图像的宽度，并且宁愿不使用 JS 来测量这些宽度，以保持一切尽可能轻，并且不干扰较大元素中的任何媒体查询。

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

已解决 参见 Fiddle:http://jsfiddle.net/terriann/p220ddet/11/

示例 HTML 输出(因为如果我链接到 jsfiddle 则需要代码)

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

我确定之前已经回答过这个问题，但由于涉及的关键字太多，无法通过以前的搜索找到答案:/

明确目标:

• float 框应该覆盖在图片的右下角
• 图像本身应保持与未添加叠加层时相同的水平对齐方式。
• 原始图像应仍保持其对齐方式，同时不对具有类 nowrap 的图像应用任何包装(如有必要，可以应用不同的名称以正确对齐包装的图形)

这是一张清晰的图片:

Answer 1

1. 你不应该使用 <div>里面<p>标签，why?我改成了<span> .

2. 我稍微调整了 jQuery，为父级添加了对齐类 <p>标签。

3. 连同一些 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>

fiddle 演示: http://jsfiddle.net/tu374zy5/