List vertical align

[aoeui]

hi,

ashamed to ask so basic question

how can I vertically align text
so it is in the middle of list item
whic is img ?

see screenshot (small img 117×137)
http://krsiak.cz/temp/list-align-vertical.png

[chrisburton]

If I understand correctly, it will automatically be vertically aligned since by default they are block level. If you wanted them to be horizontally aligned, you would add inline to the display property.

Click preview

[aoeui]

not if you have IMG higher than text

[chrisburton]

ok then I misread what you were saying. Use the line-height property to adjust where the image lays next to the text.

[chrisburton]

Actually, if you can post just the PDF image, I’ll help you further.

[Clayton]

Are you asking how to align the text and the PDF icon horizontally?

Meaning, the image you uploaded is what you DONT want the final layout to look like?

If so, you can mess around with margins, line-heights, positioning, etc. There are hundreds of different ways to get two elements to line up vertically, or horizontally.

I can mark it up for you, and add CSS, if you’d like. After yoga however :)

Have a great morning!

[chrisburton]

Use pseudo :before for the image and add line-height to adjust it. Again, if you give me the pdf icon image, I can help you further.

[chrisburton]

Number 1


Number 2


Number 3






ul { display: block; }



li {

background: url(http://krsiak.cz/temp/test/pdf.png) no-repeat;

height: 32px;

line-height:32px;

list-style: none;

padding: 0 10px 10px 0;

}



li span {

font: normal 15px "Arial", Sans Serif;

color: #367588;

line-height:32px;

list-style: none;

padding-left: 40px;

}

[Author]

Posts