多行按钮旁边的图标

Question

我的目标是创建一个按钮，该按钮具有多行文本和旁边的图标，该图标以两行为中心。这是一个更好理解的截图

但是，我无法将按钮居中。图标始终位于按钮第一行的旁边，而不是第二行。

我的按钮代码

.btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  border: transparent;
  padding: 6px 16px;
  transition: background-color 100ms ease;
  outline: none !important;
  border-radius: 4px;
  line-height: 28px;
  background-color: #FBBC06;
  font-size: 18px;
  color: #022753;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.btn:before {
  font-family: 'Material Icons';
  content: 'shopping_cart';
  font-feature-settings: 'liga';
  font-size: 50px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button class="btn">
    <span>von günstigstem Anbieter<br> in den Warenkorb legen</span>
</button>

正如您所看到的，图标仅与按钮中的第一行对齐，但我想让它与两条线垂直对齐。

我尝试了没有跨度，但结果是一样的。

Answer 1

您可以使用 position: absolute 将图标垂直居中对齐。我已经改变了你的一些CSS。请查看以下

＆＃13;

＆＃13;

.btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  border: transparent;
  padding: 6px 16px 6px 70px;
  transition: background-color 100ms ease;
  outline: none !important;
  border-radius: 4px;
  line-height: 28px;
  background-color: #FBBC06;
  font-size: 18px;
  color: #022753;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}

.btn:before {
  font-family: 'Material Icons';
  content: 'shopping_cart';
  font-feature-settings: 'liga';
  font-size: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  left: 16px;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button class="btn">
    <span>von günstigstem Anbieter<br> in den Warenkorb legen</span>
</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在display: inline-block上使用.btn>span对齐图标旁边的两行。然后，您可以使用vertical-align将它们垂直居中。

.btn>span { display: inline-block }