Как вертикально выровнять элементы списка с пулями?

Question

У меня есть неупорядоченный список с пользовательскими изображениями пули. Они представляют собой треугольники, указывающие справа на список. Я хотел бы, чтобы точка была выровнена с вертикальным центром первой строки текста в элементе списка. Как я могу это достичь?

Это то, что я в настоящее время просматриваете:

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

Линия высоты, кажется, не делать ничего.

Answer 1

вы можете использовать псевдо-элемент 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>

Answer 2

Настоятельно сложно предоставить окончательный код без доступа к вашему изображению, но попробуйте слить следующий код с вашим собственным. Первое значение 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?