水平对齐文本和＆amp;：图像内部按钮

Question

我有下一个按钮：<button className="my-button">Deposit</button>

除了"Deposit"文字外，还应该有存款图片。我用&:after技巧添加它。它看起来像：

问题：得到以下结果。对于cource，我可以将deposit.png对齐到正确的位置，但我无法移动按钮文本。

问题： 如何在没有额外包装器的情况下将Deposit文本和deposit.png对齐到按钮内（仅限css）？

我的css：

button.my-button {
  position: relative;
  width: 125px;
  height: 40px;
  background: none;
  border: 2px solid fade(white, 70);
  border-radius: 4px;
  font-family: Proxima Nova Soft semibold, sans-serif;
  font-size: 13px;
  color: white;
  &:after {
    position: absolute;
    content: "";
    display: block;
    width: 19px;
    height: 16px;
    border: none;
    background: url('../assets/images/deposit.png') no-repeat;
  }
}

我的解决方法：

尝试使用flex-box，但似乎不适用于button s

Answer 1

  

.my-button：在{display：inline-block;之后/ *你已经给了它   display：block - 使其落入下一行* /}

＆＃13;

＆＃13;

body {
  background: #333
}
.my-button {
  position: relative;
  width: 125px;
  height: 40px;
  background: none;
  border: 2px solid #eee;
  border-radius: 4px;
  font-family: Proxima Nova Soft semibold, sans-serif;
  font-size: 13px;
  color: white;
}
.my-button:after {
  content: "";
  vertical-align:middle;
  display: inline-block;
  /* you have given it display:block - which makes it fall in next line*/
  width: 19px;
  height: 16px;
  border: none;
  background: url('https://cdn2.iconfinder.com/data/icons/ledicons/money_pound.png') left top no-repeat;
}

＆＃13;

<button class="my-button">Deposit</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我制作了Fiddle，可以满足您的需求。您需要制作:after元素display: inline-block;，不制作position: absolute;。制作position: absolute;会将其从“流程”

中删除

Answer 3

之前和之后的所有内容都是在元素的内容之前或之后切换一个额外元素，这些内容是其他html元素或文本无关紧要。

通过制作没有position: relative，top，bottom或left定义的图片right以及简单的display: inline-block，文本。

由于您使用了:after伪造的选择器，因此该元素显然位于文本之后，您现在需要做的就是将其与文本隔开并可能将其垂直居中。

您可以使用vertical-align: middle垂直居中（因为此图片通过display: inline-block表示为文字）

之后，您可以使用margin-left来区分元素，因为inline-block元素可以有边距。 （padding也可以正常工作，但在这种情况下，保证金是更好的选择）

这也会导致图像在文本变长时移动（除非您设置特定的宽度/高度来剪切或包裹图像）。

原因保证金＆gt;在这种情况下填充是因为你在节点之间间隔而不是在节点中间隔内容（无论如何这是想法 - 将其视为添加带边距的空白）

希望这有帮助，如果您需要更多信息，请随时询问。

Answer 4

您可以使用您的代码并只添加3行代码，显示不必是内联块。

button:after {
  right: 10px;
  top: 50%;
  margin-top: -8px;
}