0

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

任何帮助将不胜感激！

4

1 回答 1

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 高度，并将垂直对齐到中间。

于 2012-10-14T22:54:47.913 回答