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

#html #css #html5 #шрифты

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



.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;
}


  
ПРЕДЫДУЩИЕ
  
СЛЕДУЮЩИЕ




    

Ответы

Ответ 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;
}
*/



ПРЕДЫДУЩИЕ
  
ПРЕДЫДУЩИЕ
  



Ответ 2

Попробуйте через 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;
}


  
ПРЕДЫДУЩИЕ
  
СЛЕДУЮЩИЕ



Ответ 3

Еще вариант с 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;
}


  
ПРЕДЫДУЩИЕ
  
  
СЛЕДУЮЩИЕ
  



Ответ 4

Или так вот: 



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


  
ПРЕДЫДУЩИЕ
   
  
СЛЕДУЮЩИЕ



Ответ 5

вопрос решается через 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;
}


  
ПРЕДЫДУЩИЕ
  
СЛЕДУЮЩИЕ