Html 垂直对齐多个文本行

我试图将一个图标与其左右两侧的文本对齐。我正在使用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; ?>

是否有要垂直对齐的父div或p标记？垂直对齐比它应该的更复杂，但是，这是因为有很多未知因素

假设你的区域高度为250像素，你需要让文本垂直对齐。
下面是一些简单实现它的CSS：

line-height:250px;

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

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

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

.textplacer{行高：250px；}
.textplacerTwo{行高：250px；页边距顶部：-235px；}
你的内容
你的内容
Flexbox可以做到这一点


*{
保证金：0；
框大小：边框框；
文本对齐：居中；
}
a{
文字装饰：无；
颜色：红色；
字体大小：36px；
填充：.25em；
边框：1px纯灰；
宽度：250px；
}
a、 弯曲{
显示器：flex；
证明内容：中心；
对齐项目：居中；
另一种没有表格和flexbox的方式（需要IE10及更高版本）

您可以使元素
显示：内联块
并对其应用
垂直对齐：中间

下面是一个例子
你能为这些问题发送url或在JSFIDLE中添加代码吗？你能发布一个为这个问题生成的HTML标记的检查者截图吗？对“后退”按钮的输出进行编辑。“下一步”按钮是类似的，因为问题只存在于css中，最好添加HTML/css片段或链接到你的站点……比如t他很难看到完整的图像，如果可以的话我会的，但它在本地主机上这就是我想要的视觉效果，我无法判断它是否在一行上工作，因为框是定义的大小。其他评论，可以更具体一点吗。CSS编写它的方式将适用于每个链接等。如果您可以在演示中向我们展示您的输出，那么除了您之外，很难提供帮助当然，这两个都应该在同一行中起作用。是的，这里的演示是故意泛化的（毕竟它只是一个演示）…您必须在自己的代码中使其更具体。交叉浏览器很重要，垂直对齐中间似乎永远不适用于meThis。此属性有点棘手。它应该应用于所有应该垂直居中的元素，而不是其容器。元素也必须是内联块。是否需要定义的宽度才能工作？当没有足够的空间时，似乎无法让它们彼此对齐。文本在图标下方，然后开始包装，我仅为示例设置宽度。
.textplacer { line-height:250px; }
.textplacerTwo { line-height:250px; margin-top:-235px; }

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