仅使用HTML创建旁边有图像的侧边栏

我正试图制作一个带有链接的侧边栏，我已经做了，但是图片放在了文本下面。 我已将图像居中，但不知道如何将其与文本右侧对齐

   <div class="sidebar">
    <span style="vertical-align: middle;">
    <a href="#about"style="font-size: 100px;">Best Audio Quality</a></tr> <br>
    <a href="google.ca" style="font-size: 100px;">Budget Gaming</a> <br>
    <a href="#clients" style="font-size: 100px;">Top 10 of 2020</a> <br>
    <a href="#contact" style="font-size: 100px;">XBOX</a> <br>
    <a href="#contact" style="font-size: 100px;">PS4</a> <br>
    <a href="#contact" style="font-size: 100px;">PC</a> <br>
    <a href="#contact" style="font-size: 100px;">Nintendo Switch</a> <br>
    <a href="#contact" style="font-size: 100px;">Music</a> <br>

    <center>
        
        <div class="w3-content">
            <span style="vertical-align: middle;"></span>
          <img class="mySlides" src="https://cdn.mos.cms.futurecdn.net/kbpt9fYfJbKbJ5WrHKRhrS-2560-80.jpg.webp" alt="custom_html_banner1" style="width:40%">
         
         </div>
         </center>

给我们发一些代码，否则，没有人能回答你的问题。我们不会在您的网站上给您写信。这个问题无法回答，除非您希望我们为您创建一个带有导航栏的网站并提供代码，但我想您也可以在谷歌上搜索，而不必在此处提问。

如果您想将图像与文本右侧对齐，可以使用align=“right”

text here
，您可以使用
style=“float:right；”
。这将使图像位于块元素的右边框，而文本位于左侧。但是，您应该将图像放在要对齐的文本的顶部

如果只希望图像仅使用HTML显示在文本的右侧，则只需在内联元素包含的文本之后包含图像即可。内联元素只占据其内部内容所需的位置，因此它们基本上位于同一行中<代码>

也是一个内联元素。这样就可以了

您的
稍微简化了一点，并用于为您提供一些关于在这些情况下如何布局内容的其他想法。请参见下面代码的工作示例@

HTML



.container{
显示器：flex；
弯曲方向：行；
宽度：100%；
身高：100%；
对齐项目：居中；
证明内容：中心；
}
.侧边栏{
显示器：flex；
弯曲方向：立柱；
}
.w3内容{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
我用谷歌搜索了各个方面，我认为我做得不太好这还可以用链接a href而不是吗？它看起来不像这样工作