在img之后追加div并垂直对齐它

Question

我试图在图像之后使用jQuery附加div，而不是将其放在图像的中间。所以，如果这是图像

<div class="entry">
<img class="alignnone size-full wp-image-7711" src="http://some-source.com/img" alt="celebrity-girlfriends-6" width="728" height="382">
</div>

我像这样追加div：

jQuery('.entry').find('img:first').after('<div id="test"></div>');

但有没有办法将新div放在图像的中间？ THX

Answer 1

您可以position: absolute使用#test，父position: relative使用div

＆＃13;

＆＃13;

$('.entry').find('img:first').after('<div id="test">Test</div>');

＆＃13;

.entry {
  position: relative;
  display: inline-block;
}
#test {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry">
  <img src="http://placehold.it/350x150">
</div>

＆＃13;

＆＃13;

＆＃13;