垂直菜单中的图像未与菜单容器对齐

Posted

技术标签:

【中文标题】垂直菜单中的图像未与菜单容器对齐【英文标题】：Image in Verticle Menu not Aligning to Menu Container 【发布时间】：2021-05-14 16:29:02 【问题描述】：

所以我无法让标签中的图像在主包装器/Ul 的中心对齐。我尝试在 tag 、 tag 本身和 tag 中的图像中添加类，但无论我使用位置还是浮动，图像都会稍微超出菜单包装。我已经有几年没有这样做了，所以我一定忘记了这里的一个基本步骤才能让它发挥作用。

h1 
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 30px;
  color: gray;


#wrapper 
  width: 180px;
  height: 200px;
  padding: 0px;


p 
  margin: 5px;
  padding: 5px;
  color: gray;
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 12px;
  letter-spacing: 1px;



ul 
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  list-style: none;
  letter-spacing: 2px;
  text-align: center;


ul li 
  display: block;
  position: relative;
  width: 180px;
  margin: 0;


introImg 
  float: none;
  position:inherit;
  padding: 0;
  margin: auto;


li ul 
  display: none;
  margin: 0;


ul li a 
  display: block;
  text-decoration: none;
  background: gray;
  color: #000;
  border-top: 2px solid #666;
  padding: 5px 15px 5px 15px;
  margin-left: 1px;
  white-space: nowrap;


ul li a:hover 
  background: #949494;


li:hover ul 
  display: block;
  position: absolute;


li:hover li 
  float: left;
  font-size: 11px;


li:hover a 
  background: #A0A0A0;


li:hover li a:hover 
  background: #C2C2C2;


ul li ul 
  position: absolute;
  left: 100%;
  top: 0;

<h1 align="center">javascript Menu Conversion</h1>
    <p align="center">Converting old JavaScript to menu to Static html & CSS.</p>
    <div id="wrapper">
      <img src="https://tlod.net/include/img/buttontop.png">
      <ul id="menu">
        <li class= "imgNav"><a href=""><img src="https://tlod.net/include/img/introbutton.jpg"></a>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
          </ul>
        </li>
        <li><a href="">Story</a>
          <ul>
            <li><a href="#">Prologue</a></li>
            <li><a href="#">Ch1: Serdian War</a></li>
            <li><a href="#">Ch2: The Platinum Shadow</a></li>
            <li><a href="#">Ch3: Fate and Soul</a></li>
            <li><a href="#">Ch4: Moon and Fate</a></li>
          </ul>
        </li>
        <li><a href="">Characters</a>
          <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
        <li><a href="">Game Help</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Printables</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Media</a>
          <ul>
            <li><a href="#">MIDIs</a></li>
            <li><a href="#">MP3s</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Voice Clips</a></li>
          </ul>
        </li>
        <li><a href="">Etc.</a>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Links In/Out</a></li>
            <li><a href="#">Notes</a></li>
            <li><a href="#">Voices/Lyrics</a></li>
            <li><a href="#">Translations</a></li>
          </ul>
        </li>
      </ul>
      <img src="https://tlod.net/include/img/buttonbottom.png">
    </div>

【问题讨论】：

【参考方案1】：

您的图像太宽（比nav 的li 更宽，因此它会强制其li 父级溢出，即变得更宽。

为避免这种情况，请添加此 CSS，它将图像的大小（即宽度）限制为适合 li（包括填充）：

li.imgNav img 
  width: 100%;

这里适用于整个代码：

h1 
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 30px;
  color: gray;


#wrapper 
  width: 180px;
  height: 200px;
  padding: 0px;


p 
  margin: 5px;
  padding: 5px;
  color: gray;
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 12px;
  letter-spacing: 1px;



ul 
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  list-style: none;
  letter-spacing: 2px;
  text-align: center;


ul li 
  display: block;
  position: relative;
  width: 180px;
  margin: 0;


introImg 
  float: none;
  position:inherit;
  padding: 0;
  margin: auto;


li ul 
  display: none;
  margin: 0;


ul li a 
  display: block;
  text-decoration: none;
  background: gray;
  color: #000;
  border-top: 2px solid #666;
  padding: 5px 15px 5px 15px;
  white-space: nowrap;


ul li a:hover 
  background: #949494;


li:hover ul 
  display: block;
  position: absolute;


li:hover li 
  float: left;
  font-size: 11px;


li:hover a 
  background: #A0A0A0;


li:hover li a:hover 
  background: #C2C2C2;


ul li ul 
  position: absolute;
  left: 100%;
  top: 0;

li.imgNav img 
  width: 100%;

<h1 align="center">JavaScript Menu Conversion</h1>
    <p align="center">Converting old JavaScript to menu to Static HTML & CSS.</p>
    <div id="wrapper">
      <img src="https://tlod.net/include/img/buttontop.png" style="display: block;">
      <ul id="menu">
        <li class= "imgNav"><a href=""><img src="https://tlod.net/include/img/introbutton.jpg"></a>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
          </ul>
        </li>
        <li><a href="">Story</a>
          <ul>
            <li><a href="#">Prologue</a></li>
            <li><a href="#">Ch1: Serdian War</a></li>
            <li><a href="#">Ch2: The Platinum Shadow</a></li>
            <li><a href="#">Ch3: Fate and Soul</a></li>
            <li><a href="#">Ch4: Moon and Fate</a></li>
          </ul>
        </li>
        <li><a href="">Characters</a>
          <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
        <li><a href="">Game Help</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Printables</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Media</a>
          <ul>
            <li><a href="#">MIDIs</a></li>
            <li><a href="#">MP3s</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Voice Clips</a></li>
          </ul>
        </li>
        <li><a href="">Etc.</a>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Links In/Out</a></li>
            <li><a href="#">Notes</a></li>
            <li><a href="#">Voices/Lyrics</a></li>
            <li><a href="#">Translations</a></li>
          </ul>
        </li>
      </ul>
      <img src="https://tlod.net/include/img/buttonbottom.png">
    </div>

【讨论】：

我看不出图片怎么这么大。 wrapper 和 ul li 都设置为图像的宽度 180px。我需要图像与菜单标题图像“buttontop.png”的宽度相同，它也是 180。我正在将 JavaScript 菜单转换为 HTML 和 CSS，请参见此处：link 屏幕截图以防 JavaScript 不出现给你：link 两边都有 15px 的内边距（在 a 元素上），留出 150px 留给图片。 啊，左边距：1px；现在它可以工作了。伙计，我知道这是我忘记或不检查的基本内容。谢谢。 注意：margin 是不从width 中减去任何东西，它总是在框外添加。 它把图片移了1px。在我将其设置为 0 后，它与所有内容对齐。【参考方案2】：

尝试将width: 100%; 添加到与包装器 div 重叠的图像中。

introImg 还需要一个 .如果它是一个类，则放在它前面，如果它是一个 ID，则放在它前面。

虽然我在您的 HTML 代码中看不到 introImg 的使用？

所以我将 introImg CSS 代码块更改为 img 标签并添加了 width: 100%;

h1 
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 30px;
  color: gray;


#wrapper 
  width: 180px;
  height: 200px;
  padding: 0px;


p 
  margin: 5px;
  padding: 5px;
  color: gray;
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 12px;
  letter-spacing: 1px;



ul 
  font-family: Veranda, Ariel, Sans-Serif;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  list-style: none;
  letter-spacing: 2px;
  text-align: center;


ul li 
  display: block;
  position: relative;
  width: 180px;
  margin: 0;


img 
  float: none;
  position:inherit;
  padding: 0;
  margin: auto;
  width: 100%;


li ul 
  display: none;
  margin: 0;


ul li a 
  display: block;
  text-decoration: none;
  background: gray;
  color: #000;
  border-top: 2px solid #666;
  padding: 5px 15px 5px 15px;
  margin-left: 1px;
  white-space: nowrap;


ul li a:hover 
  background: #949494;


li:hover ul 
  display: block;
  position: absolute;


li:hover li 
  float: left;
  font-size: 11px;


li:hover a 
  background: #A0A0A0;


li:hover li a:hover 
  background: #C2C2C2;


ul li ul 
  position: absolute;
  left: 100%;
  top: 0;

<h1 align="center">JavaScript Menu Conversion</h1>
    <p align="center">Converting old JavaScript to menu to Static HTML & CSS.</p>
    <div id="wrapper">
      <img src="https://tlod.net/include/img/buttontop.png">
      <ul id="menu">
        <li class= "imgNav"><a href=""><img src="https://tlod.net/include/img/introbutton.jpg"></a>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Introduction</a></li>
          </ul>
        </li>
        <li><a href="">Story</a>
          <ul>
            <li><a href="#">Prologue</a></li>
            <li><a href="#">Ch1: Serdian War</a></li>
            <li><a href="#">Ch2: The Platinum Shadow</a></li>
            <li><a href="#">Ch3: Fate and Soul</a></li>
            <li><a href="#">Ch4: Moon and Fate</a></li>
          </ul>
        </li>
        <li><a href="">Characters</a>
          <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </li>
        <li><a href="">Game Help</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Printables</a>
          <ul>
            <li><a href="#">Abnormalities</a></li>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Additions</a></li>
            <li><a href="#">Art of Fighting</a></li>
            <li><a href="#">Enemies</a></li>
            <li><a href="#">Experience</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Item Locations</a></li>
            <li><a href="#">Shopping</a></li>
            <li><a href="#">Sidequests</a></li>
            <li><a href="#">Special Items</a></li>
            <li><a href="#">Stardust</a></li>
            <li><a href="#">Stardust Picture Guide</a></li>
            <li><a href="#">Team/Stat Evaluation</a></li>
            <li><a href="#">Weapons/Armor</a></li>
            <li><a href="#">Walkthrough</a></li>
          </ul>
        </li>
        <li><a href="">Media</a>
          <ul>
            <li><a href="#">MIDIs</a></li>
            <li><a href="#">MP3s</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Voice Clips</a></li>
          </ul>
        </li>
        <li><a href="">Etc.</a>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Links In/Out</a></li>
            <li><a href="#">Notes</a></li>
            <li><a href="#">Voices/Lyrics</a></li>
            <li><a href="#">Translations</a></li>
          </ul>
        </li>
      </ul>
      <img src="https://tlod.net/include/img/buttonbottom.png">
    </div>

【讨论】：

introImg 试图让图像在容器中居中。我尝试了浮动、位置，甚至是文本对齐（html 标记），但它从未移动过。感谢您的帮助。

以上是关于垂直菜单中的图像未与菜单容器对齐的主要内容，如果未能解决你的问题，请参考以下文章

背景图像未与 s-s-rS 中的气泡图对齐

#menu div 中的垂直居中 UL 菜单和 IMG

HTML5 图像未与相同的 css 正确对齐

导航栏菜单在小屏幕上不垂直对齐和汉堡菜单的位置

如何使导航菜单中的文本居中

在相邻的flexbox容器中垂直对齐内容