按钮内文本与图像的垂直对齐

vertically alignment of a text inside a button with an image

在此 CodePen 中,您可以看到一个 <button>,其中包含图像和文本 (<span>)。问题是文本多行时。第二行文本并没有立即靠近第一行,而是出现了一个大的 space(计算 <img> 的高度)。

我的代码(on CodePen):

button {
  width: 300px;
}
img {
  vertical-align: middle;
}
<button>
  <img src="http://lorempixel.com/50/50/" />
  <span> Some Text some text some text some text some text some text some text some text</span>
</button>

您可以使用以下使用 flexbox 的解决方案:

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
button {
  align-items: center;
  display: flex;
  padding: 3px;
  justify-content: center;
  width: 300px;
}
button img {
  flex-shrink: 0;
  margin-right: 10px;
}
<button>
  <img src="https://lorempixel.com/50/50/" alt="">
  <span>Some Text Some Text Some Text Some Text Some Text Some Text Some Text</span>
</button>
<button>
  <img src="https://lorempixel.com/50/50/" alt="">
  <span>Some Text</span>
</button>
<button>
  <img src="https://lorempixel.com/50/50/" alt="">
</button>

你能试试这个吗 https://codepen.io/anon/pen/qVKagg

button {
  width: 300px;
  display: flex;
  text-align:left;
}

img {
  vertical-align: middle;
  margin-right:5px;
}
<button>
<img src="http://lorempixel.com/50/50/" />
<span> Some Text some text some text some text some text some text some text some text</span>
</button>

试试这样吧。还有其他方法,但是这个很简单。

button {
  width: 300px;
}
button img {
  float:left;
  width:20%;
}
button span {
  float:right;
  width:80%;
}
<button>
  <img src="http://lorempixel.com/50/50/" />
  <span> Some Text some text some text some text some text some text some text some text</span>
</button>