时间戳

首页 > 解决方案 > 当我将按钮的宽度和高度更改为小数字时，按钮中的内联图标不居中

html - 当我将按钮的宽度和高度更改为小数字时，按钮中的内联图标不居中

问题描述

我有遵循以下结构的按钮：

<button type="button" class="btn btn-dark btn-sm"(click)="doSomething()">
    <i class="fa fa-pencil" aria-hidden="true"></i>
</button>

它们看起来像这样：

第一张照片

我可以更改按钮的高度和宽度，并且内联图标将保持居中：

.btn.btn-dark.btn-sm {
    height: 80px;
    width: 200px;
}

在此处输入图像描述

但是当我将它们缩小到移动设备时，突然之间，内联图标在我低于某个宽度/高度后停止居中：

@media (max-width: 690px){
.btn.btn-dark.btn-sm {
    width: 10px;
    height: 20px;
  }
}

第三

为什么他们不再以小宽度/高度为中心？我将如何解决它？我尝试将它们对齐到中心等，但还没有找到可行的解决方案。

标签： htmlcss

解决方案

看起来按钮可能有一些填充，当太小时会干扰。试试这个片段

.btn.btn-dark.btn-sm {
  height: 20px;
  width: 20px;
  padding: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button type="button" class="btn btn-dark btn-sm" (click)="doSomething()">
  <i class="fa fa-pencil" aria-hidden="true"></i>
</button>

推荐阅读