Я пытаюсь выровнять значок с текстом, расположенным слева и справа от него. Я использую 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>
1
user3550879 24 Дек 2015 в 11:52

3 ответа

Лучший ответ

Другой способ без таблиц и flexbox (для которого требуется IE10 и выше).

Вы можете создавать элементы display: inline-block и применять к ним vertical-align: middle.

Вот пример https://jsfiddle.net/bbvpaLgd/2/

1
Anton Gusar 24 Дек 2015 в 10:45

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>
0
Paulie_D 24 Дек 2015 в 09:28

Есть ли родительский тег 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>
0
askhir 24 Дек 2015 в 09:10