CSS垂直对齐图像与文本不起作用（Wordpress）答案

【问题标题】：CSS vertical align an image with text not working (Wordpress)CSS垂直对齐图像与文本不起作用（Wordpress）
【发布时间】：2012-10-15 06:54:47
【问题描述】：

所以我试图让一个图像文件在 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>

任何帮助将不胜感激！

【问题讨论】：

标签： css image wordpress html vertical-alignment

【解决方案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 高度，并垂直居中对齐。

【讨论】：