Vertical align multiple text lines

Question

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

EDIT

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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

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

Here is an example https://jsfiddle.net/bbvpaLgd/2/

Vertical align multiple text lines

Sign up