如何垂直放置字体超棒的箭头图标中心

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

您可以将 FA 图标放在另一个元素中，这将是您的灰色背景元素，或者您可以添加这些 CSS 属性：

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

基本上降低了高度，但通过 padding-top 进行补偿，这会强制 FA 箭头图标向下到灰色区域的中心。

Answer 2

您可以添加顶部和底部填充（并从 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 3

line-height 它被 font-awesome 覆盖了，添加 !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 4

和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 5

我会用 <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>

如何垂直放置字体超棒的箭头图标中心

how to place font-awesome arrow icon center vertically

css

vertical-alignment

font-awesome