как правильно разместить шрифт в центре.

Question

.btnup, .btndown{
    	display:inline-block;
    	font-size:20px;
    	background:#ddd;
    	border-radius:5px;
    	cursor:pointer;
    	width:25px;
    	line-height:30px;
    	height:30px;
    	color:#999;
    	text-align:center;
    	margin:0 5px;
    }

    <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

    <i class="fas fa-angle-up btnup" id='btnup'></i>
    <i class="fas fa-angle-down btndown" id='btndown'></i>

Как расположить стрелки по центру по вертикали?

Answer 1

Я бы обернул <span> вокруг символа и использовал бы flexbox , чтобы расположить его в центре.

.btnup,
.btndown {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
  font-size: 20px;
  background: #ddd;
  border-radius: 5px;
  cursor: pointer;
  width: 25px;
  height: 30px;
  color: #999;
  margin: 5px;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />

<span class="btnup"><i class="fas fa-angle-up"></i></span>
<span class="btndown"><i class="fas fa-angle-down"></i></span>

Answer 2

Играть с height и padding-top:

.btnup, .btndown{
    	display:inline-block;
    	font-size:20px;
    	background:#ddd;
    	border-radius:5px;
    	cursor:pointer;
    	width:25px;
    	line-height:10px;
      padding-top: 5px;
    	height:24px;
    	color:#999;
    	text-align:center;
    	margin:0 5px;
    }

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

    <i class="fas fa-angle-up btnup" id='btnup'></i>
    <i class="fas fa-angle-down btndown" id='btndown'></i>

Answer 3

Вы можете добавить верхний и нижний отступы (и вычесть эти значения из настройки height):

.btnup, .btndown{
    	display:inline-block;
    	font-size:20px;
    	background:#ddd;
    	border-radius:5px;
    	cursor:pointer;
    	width:25px;
    	line-height:30px;
    	height:20px;
    	color:#999;
    	text-align:center;
    	margin:0 5px;
      padding: 5px 0 5px 0;
    }

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

    <i class="fas fa-angle-up btnup" id='btnup'></i>
    <i class="fas fa-angle-down btndown" id='btndown'></i>

Answer 4

line-height переопределяется потрясающим шрифтом, добавьте !important, чтобы оно заняло ваше

.btnup,
.btndown {
  display: inline-block;
  font-size: 20px;
  background: #ddd;
  border-radius: 5px;
  cursor: pointer;
  width: 25px;
  line-height: 30px!important;
  height: 30px;
  color: #999;
  text-align: center;
  margin: 0 5px;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />

<i class="fas fa-angle-up btnup" id='btnup'></i>
<i class="fas fa-angle-down btndown" id='btndown'></i>

Answer 5

Вы можете поместить значок FA внутри другого элемента, который будет вашим серым фоновым элементом, или вы можете добавить следующие свойства CSS:

        height:25px;
  padding-top: 5px;

По существу, уменьшение высоты, но компенсация за это с помощью padding-top, который заставляет значки стрелок FA вниз к центру серой области.