CSS 垂直对齐图像与文本不起作用 (Wordpress)

Question

所以我试图让一个图像文件垂直对齐在 div 的中间，在我的移动 Wordpress 主题的右侧有文本。不幸的是，在图像上使用“vertical-align:middle”会导致以下结果:

这是我的 CSS:

        <div <?php post_class('post clearfix'); ?> id="post-<?php the_ID(); ?>">
    <div style="vertical-align:middle"><?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail('post', 'secondary-image');  endif; ?></div>
<h2 class="title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'themater' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
             <div class="postmeta-primary-fp">

           <?php echo get_the_date(); ?></div>

               <div class="postmeta-primary-fp"> <?php if(comments_open( get_the_ID() ))  {
                    ?><span class="meta_comments"><?php comments_popup_link( __( '<b>0</b> comments', 'themater' ), __( '<b>1</b> comment', 'themater' ), __( '<b>%</b> comments', 'themater' ) ); ?></span><?php
                } ?>
        </div>

如有任何帮助，我们将不胜感激!

Answer 1

做一个父div来放图片和文字，把图片放在左浮动的div中，line-height设置为div的高度，vertical-align设置为middle，然后添加一个右浮动的div文本。像这样的东西:

<div style="width:400px;">
    <div style="float:left;width:50px;height:50px;line-height:50px;vertical-align:middle;">
        <img src="imageurl" />
    </div>

    <div style="width:380px;float:left;height:50px;">
        Text here
    </div>
</div>

如果您希望文本与图像居中对齐，请将其行高设置为 div 高度，并将垂直居中对齐。