标题文本右侧的垂直对齐图标

如何解决标题文本右侧的垂直对齐图标

我正在尝试将 YouTube 徽标与文本右侧对齐。目前，徽标显示在文本下方 - like this。

对 div 使用 flex 有效，但对平板电脑/移动设备没有响应，因为徽标显示在最右边，而不是文本旁边。

我该如何解决这个问题？这个 here 是我使用的徽标。

<div style="align-items:center;">
    <h3 style="vertical-align:middle">Our Business Opportunity</h3>
    <a href="https://www.youtube.com">
        <img style="vertical-align:middle" src="assets/img/youtube_icon.png" width="35" height="35" />
    </a>
</div>

解决方法

Flex 工作，如果你不指定 justify-content 属性或给它默认值“flex-start”。

试试这个：

<div style="display: flex;">
    <h3 style="vertical-align:middle">Our Business Opportunity</h3>
    <a href="https://www.youtube.com">
    <img style="vertical-align:middle" src="assets/img/youtube_icon.png" width="35" height="35" />
    </a>
</div>

现在您只需要在 h3 和图像之间添加一些空间。