I am struggling with centering the image within the article list loop I created. The code snippet looks like this:
<article class="article <?php if($i%2==0) { echo 'even'; } else { echo 'odd'; } ?>">
<section class="container">
<section class="content">
<h2><?= $r['title'] ?></h2>
<span class="subtitle"><?= $r['subtitle'] ?> </span>
<section class="text">
<?= $r['text'] ?>
</section>
</section>
<section class="image">
<img src="<?= $img ?>" alt="<?= $img ?>" class="img-responsive article-image" />
</section>
</section>
</article>
I have been attempting to use jQuery to vertically center the image in relation to the content at all times. Specifically, I wanted to achieve an image margin-top that is calculated as
(content.height()-image.height())/2Despite my efforts, the jQuery approach using
$('.image').closest($('.content')).content element and adjusting the margin-top based on that.
If you have a solution utilizing either jQuery or CSS to accomplish this alignment issue, I would greatly appreciate your guidance. Previous attempts using CSS were unsuccessful due to float properties applied to both the image and content elements, causing them to be positioned horizontally next to each other.