Question

我正在尝试将图标与放置在其左侧和右侧的文字对齐。我正在使用Wordpress和bootstrap为我的帖子创建一个后退/下一个按钮导航

div

fa fa-arrow创建一个箭头图标。我希望它的右侧和左侧显示的文本与图标垂直对齐，因为它从一行变为两行。（基于屏幕尺寸）标题由帖子生成

修改

生成的输出（左/后按钮）是

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

Answer 1

没有table和flexbox的另一种方式（需要IE10及更高版本）。

您可以制作元素display: inline-block并将vertical-align: middle应用于它们。

以下是https://jsfiddle.net/bbvpaLgd/2/

的示例

Answer 2

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

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

line-height:250px;

不幸的是，这只适用于一行，但是，我想对此作弊。我添加了一个带有负数的margin-top，以使其恢复到我的文本大小之上。所以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>

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>

OR ..你可以使用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>

垂直对齐多个文本行

3 个答案: