html - 垂直对齐多行文本

Question

我正在尝试将图标与其左右放置的文本对齐。我正在使用 Wordpress 和 Bootstrap 为我的帖子创建后退/下一步按钮导航

<?php if ( is_single() ) : // navigation links for single posts ?>

    <?php next_post_link( '<div class="nav-previous col-xs-5">%link</div>', '<span class="fa fa-chevron-left nav-icn-L"></span> <span class="meta-nav">' . _x( '%title', 'Previous post link', 'bnNav' ). '</span>'); ?>
    <?php previous_post_link( '<div class="nav-next col-xs-5">%link</div>', '<span class="meta-nav">' . _x( '%title', 'Next post link', 'bnNav' ). '</span> <span class="fa fa-chevron-right nav-icn-R"></span>'); ?>

<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>

    <?php if ( get_next_posts_link() ) : ?>
    <div class="nav-previous col-xs-5"><?php next_posts_link( __( '<span class="fa fa-arrow-left"></span> Older posts', 'bnNav' ) ); ?></div>
    <?php endif; ?>

    <?php if ( get_previous_posts_link() ) : ?>
    <div class="nav-next col-xs-5"><?php previous_posts_link( __( 'Newer posts <span class="fa fa-arrow-right"></span>', 'bnNav' ) ); ?></div>
    <?php endif; ?>

<?php endif; ?>

fa fa-arrow 创建一个箭头图标。我希望出现在其左右两侧的文本在图标从一行变为两行时与图标保持垂直对齐。 (根据屏幕尺寸)标题由帖子生成

编辑

生成的输出(左/后按钮)是

<a rel="next" href="http://localhost/wordpress/?p=369">
   <span class="fa fa-chevron-left nav-icn-L"></span>
   <span class="meta-nav">Welcome</span>
</a>

Answer 1

另一种没有表格和 flexbox 的方式(需要 IE10 及更高版本)。

您可以使元素 display: inline-block 并对其应用 vertical-align: middle。

这是一个例子 https://jsfiddle.net/bbvpaLgd/2/