user3550879 user3550879 - 5 years ago 92
HTML Question

Vertical align multiple text lines

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


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>

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download