按钮内文本与图像的垂直对齐 [英] vertically alignment of a text inside a button with an image

问题描述

在此CodePen中，您可以看到一个< button> ，其中包含图像和文本(< span> ).问题是文本多行显示.文本的第二行不是紧靠第一行，并且会出现较大的空格(计算< img> 的高度).

In this CodePen you can see a <button> with an image and text inside (<span>). The problem is when the text got multiline. The second line of text is not immediately close to the first line and a big space appears (taking in count the height of the <img>).

我的代码(在CodePen上的 ):

My code (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使用以下解决方案:

You can use the following solution using 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>

这篇关于按钮内文本与图像的垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！