списки с иконками. выравнивание

[cyklop77]

подскажите пожалуйста как выравнять строки списка относительно иконки

 

красиво когда однострочный элемент списка имеет такое выравнивание

 

красиво когда многострочный элемент списка имеет такое выравнивание

 

а возможно ли эти 2 способа объединить. так чтобы контент-менеджер не задумывался о количестве строк и выравнивании?

 

здесь я решил проблему неправильно. прописал величину смещения по вертикали каждому элементу списка

.info2_inner ul li{padding-left: 47px;background: url('../images/info2_icons/icon1.png') left top no-repeat;min-height: 42px;padding-top: 9px;padding-bottom: 20px;color: #000;font: 16px/20px arial, sans-serif;text-align: left;}.info2_inner ul li:nth-child(1){padding-top: 0;} .info2_inner ul li:nth-child(2){background: url('../images/info2_icons/icon2.png') left top no-repeat;}.info2_inner ul li:nth-child(3){background: url('../images/info2_icons/icon3.png') left top no-repeat;padding-top: 0;}.info2_inner ul li:nth-child(4){background: url('../images/info2_icons/icon4.png') left top no-repeat;}.info2_inner ul li:nth-child(5){background: url('../images/info2_icons/icon5.png') left top no-repeat;}.info2_inner ul li:last-child{padding-bottom: 0;}

 

[lexxcode]

Так указывай просто:

 background: url('../images/info2_icons/icon2.png') 0 50% no-repeat;

Может имеет смысл все-таки иконки выводить через псевдо-элементы

[swandev]

http://jsbin.com/UdupuME/1/edit ?

[Z1gnet]

прошу, мне кажется в данном случае это самый оптимальный способ http://codepen.io/anon/pen/zGCFB

Так указывай просто:

 background: url('../images/info2_icons/icon2.png') 0 50% no-repeat;

это может не прокатить, так как если иконка будет слишком высокая (выше строки) получится не очень

[lexxcode]

это может не прокатить, так как если иконка будет слишком высокая (выше строки) получится не очень

 

вот по этому я и сказал

Может имеет смысл все-таки иконки выводить через псевдо-элементы