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

【问题标题】：Vertical align icon to the right of header text标题文本右侧的垂直对齐图标
【发布时间】：2021-06-13 05:34:41
【问题描述】：

我正在尝试将 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>

【问题讨论】：

标签： html css alignment vertical-alignment

【解决方案1】：

如果您不指定 justify-content 属性或为其提供默认值“flex-start”，则 Flex 可以工作。

试试这个：

<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 和图片之间添加一些空间。

【讨论】：

感谢您的回答。在移动设备上，徽标显示在右侧，而不是与文本对齐。像这样：imgur.com/a/sCzpX7z。有没有办法解决这个问题？
@SQLNewb 我现在看到了，但只有当视口的宽度达到 246px 时，这真的很小。但是如果你仍然想修复它，你可以添加一个媒体查询并添加宽度：min-content;到 h3 元素...顺便说一句，我忘了提到 Flex 也处理垂直对齐，只需使用 align-items 属性。和垂直对齐：中间；没有做任何事情，所以你可以删除它。