HTML，CSS：将按钮内的文本与图像对齐[重复]

Posted 2023-03-05

【中文标题】HTML，CSS：将按钮内的文本与图像对齐[重复]

【英文标题】：HTML, CSS: Align text inside a button along with an image [duplicate]

【发布时间】：2021-09-28 00:28:16

【问题描述】：

我想制作一个带有图像和一些文字的按钮，但它始终将其与底部或顶部对齐。以下是我的代码：

<button><img src="https://www.google.com/s2/favicons?domain=google.com">&nbsp;Google</button>

Google

你能帮忙吗？

【问题讨论】：

有很多方法可以做到这一点。这不是最快/最干净的，但这是我的首选。 <button style="display:flex;"><img style="margin-top: auto; margin-bottom: auto; " src="https://www.google.com/s2/favicons?domain=google.com"> <p style="margin-top: auto; margin-bottom: auto; ">Google</p></button>

【参考方案1】：

通过使用flexbox，您可以轻松实现。

button 
  display: inline-flex;
  align-items: center;


img 
  width: 40px;

<button><img src="https://www.designbust.com/download/1016/png/google_logo_png_transparent512.png"> Google</button>

【参考方案2】：

@Abin Thaha 已经发帖了，可能你速度更快 :)

<button style="display: inline-flex;align-items: center;"><img style="vertical-align: middle" src="https://www.google.com/s2/favicons?domain=google.com"> Google</button>