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

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

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

假设图像尺寸为20px×20px，则将图像设为

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

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内垂直居中图像

3 个答案: