append div после img и вертикально выровнять его

Question

Я пытаюсь добавить div с помощью jQuery после изображения и поместить его в середину изображения. так что если это изображение

<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 в середине изображения? ТНХ

Answer 1

Вы можете использовать position: absolute на #test и position: relative на родителей div

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

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

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