如何將我的列表項目與項目符號垂直對齊？

-4

所以我有一個無序列表與自定義項目符號圖像。它們是指向列表右側的三角形。我希望該點與列表項中第一行文本的垂直中心對齊。我怎樣才能做到這一點？如何將我的列表項目與項目符號垂直對齊？

這是我目前觀察：

<ul> 
       <li>Photography for events and portraits</li> 
       <li>Image editing and restoration</li> 
       <li>Video and audio production</li> 
      </ul> 

main ul { 
    list-style-image: url(../img/bullet.png); 
    margin-top: 25px; 
} 
main ul li { 
    line-height: 35px; 
}

行高似乎並沒有做任何事情。

來源

2015-10-16 ShoeLace1291

發佈您的代碼你題。 – j08691

我們需要看到你的HTML和CSS能夠幫助...一個圖像很好地描述視覺問題，但不知道要修改它來修改什麼。一個提示是減少圖像大小或調整行高 – ochi

這對代碼會是什麼非常自我解釋，但我仍然更新它。 – ShoeLace1291

你可以使用僞元素before \ after代替，看看下面這個例子：在

main ul { 
 
    margin-top: 25px; 
 
} 
 
main ul li { 
 
    list-style: none; 
 
} 
 
main ul li:before { 
 
    content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png"); 
 
    position: relative; 
 
    top: 10px; 
 
    left: -10px 
 
}

<main> 
 
    <ul> 
 
    <li>Photography for events and portraits</li> 
 
    <li>Image editing and restoration</li> 
 
    <li>Video and audio production</li> 
 
    </ul> 
 
</main>

來源

2015-10-16 21:33:29 dippas

工作完美！謝謝！ – ShoeLace1291

真的很難爲您提供最終代碼而無法訪問您的圖片，但請嘗試將以下代碼與您自己的代碼合併。第一個Padding值（當前爲3px）應該是您需要更新的項目。

li { 
    background: url(images/bullet.gif) no-repeat left top; 
    padding: 3px 0px 3px 10px; 
    /* reset styles (optional): */ 
    list-style: none; 
    margin: 0; 
}

源：Adjust list style image position?

來源

2015-10-16 21:29:51 CodeLyfe

如果您的CSS代碼中的「main」（即main ul li）引用類或ID，則您可能還會遇到一些問題。確保使用適當的選擇器前綴，例如.main作爲類，#main作爲ID。祝你好運！ – CodeLyfe

如何將我的列表項目與項目符號垂直對齊？

回答

相關問題