如何在 LI 中垂直居中图像

Question

我有以下 JSFiddle：http://jsfiddle.net/srasve8e/

HTML:

<div class="dvMain">
        <ul class="ulMM specClear">
            <li class="liMM"><a href="#" class="mmLink">PORTFOLIO</a></li>
            <li class="liMM"><a href="#" class="mmLink">ABOUT</a></li>
            <li class="liMM"><a href="#" class="mmLink">CONTACT</a></li>
            <li class="liMM"><a href="#" class="mmLink">FORUM</a></li>
        </ul>
        <div id="mmTrigger"><img src="nav-icon.png" class="imgMenu" /></div>
    </div>

我想将图像放在每个子菜单的左侧，但图像总是顶部对齐。

请帮助我将图片垂直居中。我试过垂直对齐，但没用。

Answer 1

假设图像的尺寸为 20px x 20px，然后将图像样式设置为

.image
{
position : absolute;
top : 50%;
margin-top : -10px;
}

Answer 2

使用 Flex 可能会更好。一旦您熟悉了 Flex，您就可以很容易地用 Flex 替换所有浮动和 JS 高度 hack。你的情况：

.dvMain {
  display: flex;
  align-items: center;
}

加上去掉浮点数并调换ul和img的顺序:

<div class="dvMain">
  <div id="mmTrigger"><img src="nav-icon.png" class="imgMenu" /></div>
  <ul class="ulMM specClear">
    <li class="liMM"><a href="#" class="mmLink">PORTFOLIO</a></li>
    <li class="liMM"><a href="#" class="mmLink">ABOUT</a></li>
    <li class="liMM"><a href="#" class="mmLink">CONTACT</a></li>
    <li class="liMM"><a href="#" class="mmLink">FORUM</a></li>
  </ul>
</div>

你也可以（应该）尝试删除所有不必要的东西，你的代码看起来有点复杂。

This是我几乎每天都在用的备忘单，你很快就能学会。

Answer 3

您好，您可以通过添加边距和填充来手动定位图像。但是我认为这里的示例是一种干净的方式，可以在每个子菜单的左侧居中对齐图像。

<style>
        #test {  list-style-image: url(images/bullet.gif); }
    </style>

    <ul id="test">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>

如何在 LI 中垂直居中图像

How do center an image vertically within LI

html

css

jquery