[lady_katarina]

Próbuję sobie ustawić list-style-image, który jest ładnie równo wycięty, a ostatecznie wygląda to tak krzywo z tekstem. Co mogłabym zrobić żeby ten tekst był ładnie równo z obrazkiem? (i dlaczego domyślnie to nie jest równo? O_o)

W CSS odnośnie tego mam tylko to:

ul > li {
 list-style-image: url('img/check.png');
 color: #cccccc;
 font-size: 15px; 
 font-family: 'Roboto Slab', serif;
}

#naukaprogramowania #css #frontend #webdev

[demoglobalniehiperanalnie]

@lady_katarina: nie znam się to się wypowiem... Ja bym dał do tekstu styl margin-bottom

[razor535]

@lady_katarina:

display: flex;
align-items: center;

[niewiemcotuwpisac]

@lady_katarina: nie masz wplywu na pozyje list-style-image, ja zawsze obchodze to w ten sposob:
http://jsbin.com/nopetecanu/edit?html,css,js,output
i ewentualnie ustawiam odpowiedni padding top/bottom, ew. line-height na li

[Rst00]

@lady_katarina: line-height? A najlepiej przerobić na pseudoelement

[lady_katarina]

@demoglobalniehiperanalnie: niestety jakiekolwiek kombinowanie z marginesami w tym przypadku jedynie robi odstęp między tymi kółkami i tekstem, a tekst nadal nie jest ładnie w tej samej linii co kółka :D Kurde no te kółka są idealnie przycięte zaraz przy ich końcu i to, że jest tak krzywo nie ma żadnego sensu O_O

[niewiemcotuwpisac]

ewentualnie ustawiam odpowiedni padding top/bottom, ew. line-height na li

@niewiemcotuwpisac: no ew wysrodkowanie wertykalne przez background-position, zapomnialem :p

[Fantomkiller]

@lady_katarina: Ja bym się pobawił paddingami u mnie to wygląda tak

ul li {
background: url('http://zzzz/zzzz/okejek.png') no-repeat 10px 11px transparent;
padding: 5px 10px 15px 30px;
overflow: hidden;
}

[w.....e]

@lady_katarina:

Używasz font-awesome?

Zawsze możesz użyć http://fontawesome.io/icon/check-circle-o/

[w.....e]

@lady_katarina:

Albo bez font-awesome - ale musisz zdefiniować wysokość elementu

ul > li:before

[lady_katarina]

@niewiemcotuwpisac: Dzięki, Twój sposób pomógł jak jeszcze poustawiałam paddingi odpowiednio :D Już to wygląda normalnie :)

@wzr1one: @Fantomkiller: @Rst00: @razor535: @demoglobalniehiperanalnie: dzięki wszystkim za chęć pomocy:)