<li> vertical align attiecībā pret tekstu

[jam]

ir lists

 

<li>asfasd asdf asdfa sdf asdfasda</li>

 

tas li saturs jāiebāž, piem., 100px platā div. Viņs var nowrapoties, ja nelien iekšā tajā div, bet tad tam li ir jābūt centrā attiecībā pret visām rindām, nevis apakšā.

 

Ne šitā:

 

..... asdfasdfasdf

o... asdfasdfad

 

o ir lista elements '.....' vnk apziimee space

 

 

Kā to panākt?

Edited April 10, 2006 by jam

[nemec]

izveelies li tagam atribuutu list-style: none, tad tam li pieliec background: kaut kaadu (ja vajag protams), tad ar marginiem vai paddingiem pabiiidi cik vajag

[GedroX]

Kautkas tamlīdzīgs:

<div style="width: 300px">
<ul style="list-style: none; padding: 0px; margin: 0px;">
<li style="padding-left: 20px; background: url('bullet.jpg') left center no-repeat;">Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns </li>
<li style="padding-left: 20px; background: url('bullet.jpg') left center no-repeat;">Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns Jauns </li>
</ul>
</div>

 

Protams, ka style-i jāsamet css-ā, jāuztaisa kāds bullet.jpg/ gif fails, jāsaliek paddings/ margins kā gribās.

[jam]

nu skaidrs. Paldies.

[GedroX]

Vienmēr laipni. Galvenais pārbaudi, vai visos brouseros attēlojas pa tavam prātam. Tur bija problēmas, ka IE un FF padding-i un margin-i elementiem UL un LI likās dažādi. Tas, liekās, ir viens no optimālākajiem variantiem:

ul.grey
{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
ul.grey li
{
	background: url(/pic/bullets/grey.gif) no-repeat 0em 0.4em;
	padding: 0px 0px 0px 20px;
	margin: 3px 0px;
}

Nelikt UL elementam, bet gan LI elementiem padding-us. Eksperimentē.