在此 CodePen 中您可以看到<button>里面有图像和文本（<span>）。问题是当文本变成多行时。第二行文本没有立即靠近第一行，并且出现一个很大的空间（考虑到文本的高度）<img>).
我的代码（在 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
