[CSS]Wyśrodkowanie pionowe sąsiadujących elementów blokowych. Opcje

[mateusz.jarzewsk...]

Dobry wieczór.
Próbuje wyśrodkować w pionie zawartość elementu blokowego przy jednoczesnym umiejscowieniu sąsiadującego elementu przy prawej krawędzi. Wyśrodkowanie się udaje, niestety element sąsiadujący nie chce pływać (IMG:style_emoticons/default/sad.gif)

Powinno to wyglądać tak:
(IMG:http://foobar1.laohost.net/ideal.png)

Niestety wygląda tak:
(IMG:http://foobar1.laohost.net/current.png)

Kod HTML/CSS:

[HTML] pobierz, plaintext 
<style>
	ul {
		border: 3px solid red;
			list-style: none;
		margin: 0;
		padding: 0;
	}
	ul li {
		display: table-cell;
  	vertical-align: middle;
	}
	ul li:first-child {
		border: 3px solid blue;
	}
	ul li:last-child {
		border: 3px solid green;	
	}
</style>
<ul>
	<li>
		<span>
			Lorem ipsum dolor sit amet
		</span>
	</li>
	<li>
		<span>
			Lorem ipsum dolor sit amet,<br />
			consectetur adipisicing elit.<br />
			Minus, ab, similique,<br />
			iusto vitae quaerat aspernatur
		</span>
	</li>
</ul>
[HTML] pobierz, plaintext 

Czy ktoś wie jak uzyskać zamierzony efekt?
Z góry dziękuję za pomoc!

[modern-web]

[HTML] pobierz, plaintext 
<style>
	ul {
	    width: 600px;
		border: 3px solid red;
		list-style: none;
		margin: 0;
		padding: 0;
        display: table;
	}
	ul li {
		display: table-cell;
  	    vertical-align: middle;
	}
	ul li:first-child {
		border: 3px solid blue;
	}
	ul li:last-child {
		border: 3px solid green;
        float: right;
	}
</style>
<ul>
	<li>
		<span>
			Lorem ipsum dolor sit amet
		</span>
	</li>
	<li>
		<span>
			Lorem ipsum dolor sit amet,<br />
			consectetur adipisicing elit.<br />
			Minus, ab, similique,<br />
			iusto vitae quaerat aspernatur
		</span>
	</li>
</ul>
[HTML] pobierz, plaintext 

Przyjrzyj się, szerokość ul możesz sobie dopasować albo dać 100%

[mateusz.jarzewsk...]

Doskonale!
UL dostaje styl display:table i width:100% i działa.
Ostatnie pytanie, to czy takie podejście do prodblemu jest odpowiednie, zgodne ze najlepszymi praktykami.

[modern-web]

Jak najbardziej, łapie się zarówno w RWD jak i najnowszych standardach CSS.
Pamiętaj, że jeżeli dajesz table-cell to wypada, żeby obiekt - rodzic posiadał wartość "table" w tym miejscu (IMG:style_emoticons/default/smile.gif) oba znajdziesz w specyfikacji CSS3.

[com]

nie tyle że wypada nawet powinien tak to mieć (IMG:style_emoticons/default/wink.gif)

[mateusz.jarzewsk...]

nie tyle że wypada nawet powinien tak to mieć (IMG:style_emoticons/default/wink.gif)

Stylistyka kretyna.