使用bootstrap.css时，图标无法与div中心对齐

Question

这是my code

我使用以下代码将图标与div中心对齐：

<div class="webview-back icon"
     style="width: 34px; height: 34px; display: inline-block; text-align: center; background-color: lightgray;"><i
    class="fa fa-arrow-left" style="vertical-align: middle;"></i>
</div>

如下：

但是当我添加<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">时，图标会与顶部对齐

我不想使用bootstrap .btn，有没有办法将图标与div中心对齐，即使我使用bootstrap.css？

Answer 1

我不知道你为什么使用style=""我更喜欢创建CSS类，但是如果你需要这样做那么就可以了。

您可以使用line-height，例如：line-height: 34px：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="webview-back icon"
style="line-height: 34px; width: 34px; height: 34px; display: inline-block; text-align: center; background-color: lightgray;"><i
    class="fa fa-arrow-left" style="vertical-align: middle;"></i>
</div>

Answer 2

Flexbox是一件美丽的事情

我已经将HTML和CSS分开，只是为了让您更容易阅读。

我已经添加了这3行

display: inline-flex;
align-items: center;
justify-content: center;

• 第1行将显示模式设置为内联（外部）和flex （内部）
• 第2行垂直对齐内容
• 第3行水平对齐内容

＆＃13;

＆＃13;

.webview-back.icon {
  width: 34px;
  height: 34px;
  background-color: lightgray;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="webview-back icon">
  <i class="fa fa-arrow-left"></i>
</div>

＆＃13;

＆＃13;

＆＃13;

希望您能找到这个有用的