html - 将文本从图像的一侧移动到图像下方

Question

我想在 keepi 的同时将帖子的标题移动到帖子的缩略图下。这似乎是一件相当容易的事情，但我想不出正确的编码。如果有人可以提供帮助，我将不胜感激。

它的外观图片(我想要图片缩略图下方的帖子标题)

related-posts.php

<div class="related-posts">
<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 3, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related-posts"><h3 class="related-posts-title">Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><span class="related-posts-image"><?php the_post_thumbnail(); ?></span></a></div>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>


<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
</div>

CSS

.related-posts-title {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
.related-posts-image img {
        height:259px;
    width:400px;

}
.relatedthumb {
    display: inline-block;
}
.relatedcontent {
display: inline-block;
}

Answer 1

我会将图像和标题一起包装在一个 div 中，并将内联样式仅应用于外部 div。