将图片与标题文本完全对齐答案

【问题标题】：Exactly align picture to heading text将图片与标题文本完全对齐
【发布时间】：2021-01-03 02:01:48
【问题描述】：

在尝试了很多关于如何解决以下问题的建议后，我认为是时候寻求直接帮助了。

我正在尝试将徽标（图片）与其后面的文本（标题）完全对齐。我之前尝试过的所有解决方案都显示了不对称的放置（cp.附图）。

我希望有人可以帮助我解决这个问题。谢谢！

我想让两个红色线段的长度相同，换句话说：将文本相对于图片居中。

这是一个代码sn-p：

<div class="jumbotron">
    <img src="~/Content/images/logo.png" alt="logo" width="50" height="50"/>
    <h2 style="display:inline">Tool XY</h2>
</div>

【问题讨论】：

标签： javascript c# html css asp.net-mvc

【解决方案1】：

第一种方法

将vertical-align:middle;margin:0; 添加到h2

.jumbotron h2, .jumbotron img{
  display: inline;
  vertical-align:middle;
  margin:0;
}

.jumbotron img, .jumbotron h2{
  display: inline;
  vertical-align:middle;
  margin:0;
}

<div class="jumbotron">
  <img src="https://i.stack.imgur.com/a2I5h.png" alt="logo" width="50" height="50"/>
  <h2 style="">Tool XY</h2>
</div>

第二种方法

将此样式添加到 jumbotron

.jumbotron{
    display: flex;
    align-items: center;
}

.jumbotron{
  display: flex;
  align-items: center;
}

<div class="jumbotron">
  <img src="https://i.stack.imgur.com/a2I5h.png" alt="logo" width="50" height="50"/>
  <h2>Tool XY</h2>
</div>

【讨论】：

好吧，我很困惑。这个例子在stackoverflow的实现的运行代码sn-p中看起来很完美，但在我的例子中它仍然没有。可能还有其他问题吗？
你能在 image 和 h2 中都添加这个样式吗？
添加 margin:0; 到 h2

【解决方案2】：

你可以在img标签中使用vertical-align: middle;来垂直居中文本

.jumbotron img {
  display: inline-block;
  vertical-align: middle;
}

<div class="jumbotron">
    <img src="https://via.placeholder.com/150" alt="logo" width="50" height="50"/>
    <h2 style="display:inline">Tool XY</h2>
</div>

【讨论】：