如何做垂直內LI

我有以下的jsfiddle居中的圖像：http://jsfiddle.net/srasve8e/如何做垂直內LI

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>

我希望把圖像上留下每個子菜單的，但圖像不斷去頂對齊。

請幫我將圖像垂直居中。我嘗試垂直對齊，但沒有奏效。

來源

2015-01-01 Si8

http://stackoverflow.com/questions/3400548/how-to-vertically-align-li-elements-in-ul – meskobalazs

的可能的複製什麼是因此讓多個賬戶的目的：'SiKni8 ，Suchit庫馬爾和SearchForKnowledge'，認真？！我錯過了一些嗎？ –

@ A.Wolff多個賬戶？ –

假設的形象已被20像素20像素的樣式，然後將圖像作爲

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

來源

2015-01-01 17:22:45 MegaMind

你可能會更好使用的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是我幾乎每天都在使用的備忘單，你可以很快地拿起它。

來源

2015-01-01 17:28:16

嗨，你可以通過添加邊距和填充手動使用圖像的位置。不過，我認爲這裏的例子是一個乾淨的方式，讓每個子菜單左側的圖像居中對齊。

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

來源

2015-01-01 18:25:55 Denise

如何做垂直內LI

回答

相關問題