垂直对齐多个文本行 [英] Vertical align multiple text lines

问题描述

我正在尝试将图标与其左侧和右侧的文本对齐.我正在使用 Wordpress 和 bootstrap 为我的帖子创建后退/下一个按钮导航

I am trying to align an icon with text placed to the left and right of it. I am using Wordpress and bootstrap to create a back/next button navigation for my posts using

<?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 创建一个箭头图标.我希望出现在其右侧和左侧的文本在图标从一行变为两行时与图标保持垂直对齐.(根据屏幕大小)标题由帖子生成

fa fa-arrow creates an arrow icon. I want the text that appears to the right and left of it to stay vertically aligned to the icon as it changes from one line to two. (based on screen size) The title is generated by the post

编辑

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

the output generated (for left/back button) is

<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>

推荐答案

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

Another way without tables and flexbox (which requires IE10 and higher).

您可以使元素 display: inline-block 并将 vertical-align: middle 应用于它们.

You can make elements display: inline-block and apply vertical-align: middle to them.

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

这篇关于垂直对齐多个文本行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！