按钮内文本与图像的垂直对齐
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>
在此 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>