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

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>

回答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/

回答2:

Is there a parent div or p tag for what you want vertical aligned? Vertical align is something that is more tricky then it should be, but, it is because there are a great deal of unknowns.

Let's say the area you have is 250 pixels in height that you need to have text vertical aligned in. Here's some CSS to achieve it simply:

line-height:250px;

Unfortunately that only works for one line, but, I like to cheat a bit on this. I add a margin-top with a negative number to bring it back up just above my text size. So a size 12 font I would subtract twelve from the original line height. So for example:

.textplacer { line-height:250px; }
.textplacerTwo { line-height:250px; margin-top:-235px; }

<div class="textplacer">your content</div>
<div class="textplacerTwo">your content</div>

回答3:

Flexbox can do that.

* {
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}
a {
  text-decoration: none;
  color: red;
  font-size: 36px;
  padding: .25em;
  border: 1px solid grey;
  width: 250px;
}
a.flex {
  display: flex;
  justify-content: center;
  align-items: center;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="flex" rel="next" href="http://localhost/wordpress/?p=369">
  <span class="fa fa-chevron-left nav-icn-L"></span>
  <span class="meta-nav">Lorem ipsum dolor sit amet.</span>
</a>

OR..you could use CSS tables

* {
  margin: 0;
  box-sizing: border-box;
  text-align: center;
}
a {
  text-decoration: none;
  color: red;
  font-size: 36px;
  padding: .25em;
  border: 1px solid grey;
  width: 250px;
  display: table;
}
a span {
  display: table-cell;
  vertical-align: middle;
}
a span.fa {
  display: table-cell;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<a rel="next" href="http://localhost/wordpress/?p=369">
  <span class="fa fa-chevron-left nav-icn-L"></span>
  <span class="meta-nav">Lorem ipsum dolor sit amet.</span>
</a>

来源：https://stackoverflow.com/questions/34449892/vertical-align-multiple-text-lines