垂直对齐多个文本行

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/

Answer 2

是否有你想要垂直对齐的父 div 或 p 标签？垂直对齐比它应该的更棘手，但是，这是因为有很多未知数。

假设您拥有的区域高度为 250 像素，您需要在该区域中垂直对齐文本。 这里有一些 CSS 可以简单地实现它：

line-height:250px;

不幸的是，这只适用于一行，但是，我喜欢在这方面作弊。我添加了一个带负数的边距顶部，以使其刚好高于我的文本大小。所以我会从原始行高中减去 12 号字体。比如：

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

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

Answer 3

Flexbox 可以做到这一点。

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

或者..你可以使用 CSS 表格

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