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

Question

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

对 div 使用 flex 有效，但对 tablet/mobile 没有响应，因为徽标显示在最右边，而不是紧挨着文本。

我该如何解决这个问题？这个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>

Answer 1

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

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

Vertical align icon to the right of header text

html

css

alignment

vertical-alignment