4

Как поместить текст на одном уровне со стрелочками?

.owl-buttons .owl-prev,
.owl-buttons .owl-next {
  display: inline-block;
  font-size: 14px;
}
.owl-buttons .owl-prev:before {
  content: '\f104';
  font-family: 'fontawesome';
  margin-right: 22px;
  font-size: 36px;
  font-weight: 100;
}
.owl-buttons .owl-next:before {
  content: '|';
  margin: 0 5px;
}
.owl-buttons .owl-next:after {
  content: '\f105';
  font-family: 'fontawesome';
  margin-right: 22px;
  font-size: 36px;
  font-weight: 100;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="owl-buttons">
  <div class="owl-prev">ПРЕДЫДУЩИЕ</div>
  <div class="owl-next">СЛЕДУЮЩИЕ</div>
</div>

5 ответов 5

4

Попробуйте через position: relative;

.owl-buttons .owl-prev,
.owl-buttons .owl-next {
  display: inline-block;
  font-size: 14px;
}
.owl-buttons .owl-prev:before {
  content: '\f104';
  font-family: 'fontawesome';
  margin-right: 22px;
  font-size: 36px;
  font-weight: 100;
  position: relative;
  top: 6px;
}
.owl-buttons .owl-next:before {
  content: '|';
  margin: 0 5px;
}
.owl-buttons .owl-next:after {
  content: '\f105';
  font-family: 'fontawesome';
  margin-right: 22px;
  font-size: 36px;
  font-weight: 100;
  position: relative;
  top: 6px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="owl-buttons">
  <div class="owl-prev">ПРЕДЫДУЩИЕ</div>
  <div class="owl-next">СЛЕДУЮЩИЕ</div>
</div>

2
  • только прикол в том, что блок со "следующие" у меня подскакивает вверх, т.к. у before размер больше,чем у текста..
    – Вася
    4 янв 2016 в 12:49
  • @Вася по моему да :) 4 янв 2016 в 15:34
4

Еще вариант с vertical-align

.owl-buttons .owl-prev,
.owl-buttons .owl-next {
  display: inline-block;
  font-size: 14px;
}
.owl-buttons .owl-prev span,
.owl-buttons .owl-next span {
  vertical-align: sub;
}
.owl-buttons .owl-prev:before {
  content: '\f104';
  font-family: 'fontawesome';
  margin-right: 22px;
  font-size: 36px;
  font-weight: 100;
  vertical-align: middle;
}
.owl-buttons .owl-next:before {
  content: '|';
  margin: 0 5px;
  vertical-align: sub;
}
.owl-buttons .owl-next:after {
  content: '\f105';
  font-family: 'fontawesome';
  margin-left: 22px;
  font-size: 36px;
  font-weight: 100;
  vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="owl-buttons">
  <div class="owl-prev"><span>ПРЕДЫДУЩИЕ</span>
  </div>
  <div class="owl-next"><span>СЛЕДУЮЩИЕ</span>
  </div>
</div>

4
  • но в вашем же случае штрих криво расположен относительно тектса
    – Вася
    5 янв 2016 в 7:04
  • @Вася, не более криво, чем в остальных вариантах. что вы имеете ввиду под криво?
    – Grundy
    5 янв 2016 в 8:05
  • более. запустите код и присмотритесь как у вас расположен символ | относительно остального текста - видите как у него верх задран?
    – Вася
    5 янв 2016 в 14:22
  • 1
    @Вася, сместил чуть ниже, но в любом случае "криво" что тут, что в принятом ответе. Лучше всего, чтобы каждый настраивал сам с помощью vertical-align и размера шрифта
    – Grundy
    5 янв 2016 в 15:35
3

Или так вот:

*{
  box-sizing: border-box
}
body {
  font-family: "Pt Sans", sans serif;
  line-height: 1em
}
.owl-buttons {
  display: inline-flex;
  align-items: center;
}
.owl-buttons .owl-prev,
.owl-buttons .owl-next {
   display: inline-flex;
  align-items: center;
  
 }

.owl-buttons .owl-prev:before, .owl-buttons .owl-next:after {
  content: '\f104';
  font-family: 'fontawesome';
  font-size: 33px;
}
span {
  width: 1px;
  height: 100%;
  margin: 0 10px;
  background: #333;
}
.owl-buttons .owl-prev:before {
margin-right: 15px;
}
.owl-buttons .owl-next:after {
  content: '\f105';
  margin-left: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="owl-buttons">
  <div class="owl-prev">ПРЕДЫДУЩИЕ</div>
  <span>&nbsp</span>
  <div class="owl-next">СЛЕДУЮЩИЕ</div>
</div>

1
  • спасибо, но flex не катит
    – Вася
    4 янв 2016 в 12:30
3

вопрос решается через line-height

.owl-buttons .owl-prev,
.owl-buttons .owl-next {
  position: relative;
 display: inline-block;
  padding: 0;
  margin: 0;
  line-height: 44px;
}

.owl-buttons .owl-prev {
  padding-left: 20px;
}

.owl-buttons .owl-next {
  padding-right: 20px;
}

.owl-buttons .owl-prev:before {
  content: '\f104';
  font-family: 'fontawesome';
  font-size: 36px;
  font-weight: 100;
  line-height: 44px;
  position: absolute;
  top: 0;
  left: 0;
}
.owl-buttons .owl-next:before {
  content: '|';
  margin: 0 5px;
}
.owl-buttons .owl-next:after {
  content: '\f105';
  font-family: 'fontawesome';
  font-size: 36px;
  font-weight: 100;
  line-height: 44px;
  position: absolute;
  top: 0;
  right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="owl-buttons">
  <div class="owl-prev">ПРЕДЫДУЩИЕ</div>
  <div class="owl-next">СЛЕДУЮЩИЕ</div>
</div>

2
  • да, только, как и предыдущих товарищей у вас смещена вертикальная палочка относительно оси текста и слишком тонкая - выбивается из него и не очень эстетично смотрится)
    – Вася
    16 янв 2016 в 12:14
  • Я бы вообще это по-другому сделал. Сейчас отдельным ответом напишу.
    –  enki
    16 янв 2016 в 19:54
1

Я бы это так сделал, чтобы не было смещений и можно было регулировать толщину |. Комментариями пометил где и что регулировать для своей верстки.

#previous, #next {
  font-size: 16px;
  line-height: 44px;
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
  float: left;
 /* clear: left; */
}
#center {
  display: block;
 /* толщина | */
  float: left;
  height: 18px;
margin: 13px;
  width: 3px;
  background: #000;
  
}
#previous:before {
  content: '\f104';
  font-family: 'fontawesome';
  font-size: 44px;
  position: absolute;
  top:-1px;
  left: 0;
  font-weight: 100;
  padding: 0;
  margin: 0;
}
#next:after {
  content: '\f105';
  font-family: 'fontawesome';
  font-size: 44px;
  position: absolute;
  top:-1px;
  right: 0;
  font-weight: 100;
  padding: 0;
  margin: 0;
}

/* расстояние  от стрелки до текста*/
#previous {
  padding-left: 25px;
}

/* расстояние  от стрелки до текста*/
#next {
  padding-right: 25px;
}
/* расстояние  от | до текста*/
#center {
 margin-left: 20px;
  margin-right: 20px;
}

#wrap {
  position: relative;
  margin: 0;
 padding: 0;
  float: left;
  border: 1px solid black;
}

/* проверка центра */
/*
#yellow {
  background: yellow;
  display: block;
  height: 22px;
}
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<div id="wrap">
<span id="previous">ПРЕДЫДУЩИЕ</span>
  <span id="center"></span>
<span id="next">ПРЕДЫДУЩИЕ</span>
  <span id="yellow"></span>
</div>

5
  • о, вот так супер! Самое оно, только как я понимаю <span id="yellow"></span> - лишний?
    – Вася
    17 янв 2016 в 11:45
  • хахаха проблема не "поместить текст на одном уровне со стрелочками" а проблема в бордере 17 янв 2016 в 13:58
  • 1
    @Вася, да, он для проверки центра, т. к. зрительный обман присутствует + стрелочки кривоваты из шрифта.
    –  enki
    17 янв 2016 в 14:32
  • @enki но ведь стили закоменчены и он ничего не покажет - так ведь?
    – Вася
    17 янв 2016 в 15:00
  • @Вася , конечно, не покажет. Можно вовсе удалить и стили и html теги этого span'а.
    –  enki
    17 янв 2016 в 18:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.