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

Posted 2023-04-12

【中文标题】将图片与标题文本完全对齐

【英文标题】：Exactly align picture to heading text

【发布时间】：2021-01-03 02:01:48

【问题描述】：

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

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

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

My actual output.

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

这是一个代码sn-p：

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

【参考方案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"   />
  <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"   />
  <h2>Tool XY</h2>
</div>

【讨论】：

好吧，我很困惑。这个例子在***的实现的运行代码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"   />
    <h2 style="display:inline">Tool XY</h2>
</div>