0

そのため、モバイルWordpressテーマの右側にテキストを配置して、divの中央に画像ファイルを垂直に配置しようとしています。残念ながら、画像で「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を中央に設定してから、テキストに右側のフロート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 に答える