html - 仅使用 HTML 创建带有图像的侧边栏

Question

我正在尝试使用已完成的链接制作一个侧边栏，但图像位于文本下方。我已将图像居中，但不知道如何将其与文本右侧对齐。

   <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>

标签： htmlsidebar

Answer 1

稍微简化一下，并使用CSS Flexbox 规则为您提供一些其他想法，以了解在这些情况下您可能希望如何布置您的内容。请在此处查看以下代码的工作示例@ http://www.cssdesk.com/vPeFm

HTML

<div class="container">
     <div class="sidebar">
         <a href="#about" style="font-size: 20pt;">Best Audio Quality</a>
         <a href="google.ca" style="font-size: 20pt;">Budget Gaming</a>
         <a href="#clients" style="font-size: 20pt;">Top 10 of 2020</a>
         <a href="#contact" style="font-size: 20pt;">XBOX</a>
         <a href="#contact" style="font-size: 20pt;">PS4</a>
         <a href="#contact" style="font-size: 20pt;">PC</a>
         <a href="#contact" style="font-size: 20pt;">Nintendo Switch</a>
         <a href="#contact" style="font-size: 20pt;">Music</a>
     </div>
     <div class="w3-content">
         <img class="mySlides" 
              src="https://cdn.mos.cms.futurecdn.net/kbpt9fYfJbKbJ5WrHKRhrS-2560-80.jpg.webp" 
              alt="custom_html_banner1" style="width:40%"
          />
     </div>
</div>

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.sidebar {
  display : flex;
  flex-direction: column;
}

.w3-content {
  display: flex;
  align-items: center;
  justify-content: center;
}