Jak horyzontalnie wycentrować obrazki?

Zamysł jest taki, że mam sobie dwa obrazki, które chciałbym wycentrować, ale z zachowaniem odstępu między nimi oraz chciałbym, żeby pod niby były przypisy.

<div id="menu-outer">
	<div class="table">
		<ul id="horizontal-list">
			<li>
				<img src="/public/assets/Budzik10%20fiolet.png" alt="" width="181" height="171" />
				<h2>DŁUŻSZY SEN</h2>
			</li>
			<li>
				<img src="/public/assets/Lozko4.png" alt="" width="180" height="180" />
				<h2>LEPSZY SEN</h2>
			</li>
		</ul>
	</div>
</div>

Niestety za cholere nie chcą się ustawić obok siebie. Jak wywale h2 to niby coś tam działa.

Czyli jeszcze raz. Chciałbym, żeby w jednej linii ustawione były 2 obrazki, a pod nimi odpowiednie podpisy. Chciałbym, żeby między niby był odstęp ~ 50 px, oraz żeby były wycentrowane horyzontalnie. Podczas zmniejszania odległości powinny się proporcjonalnie zmniejszać, a gdy width < 768 px, spaść pod siebie. (nie ma być to menu, jak może sugerować id, kod wziąłem z ccs tricks)

To jeszcze bądź łaskaw dodać cssy. Kurde, ludzie, co jest, wklejacie takie szczątki, z których nie można zidentyfikować problemu.

I wrzuć to od razu na jsbin albo coś podobnego, nie utrudniaj nam rozwiązania problemu, bo nikomu się nie będzie chciało męczyć ekstra dla Ciebie.

Racja, przepraszam.

Demo

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

ul#horizontal-list {
	min-width: 696px;
	list-style: none;
	padding-top: 20px;
	}
	ul#horizontal-list li {
		display: inline;
	}

http://jsfiddle.net/3ctL9ve6/1/
o to chodziło?

Hmm, tak, tylko dlaczego nie są wyrównane horyzontalnie?:)

Bo mają inne wymiary. Możesz zrównać wymiary obrazków, albo wyrównać je do innej linii.

Narysuj to jeżeli możesz, będzie najłatwiej zrozumieć o co Ci chodzi.

Poradziłem sobie w troche inny sposób, oto rozwiązanie:

            #horizontal-gallery {
                padding: 0 10px;
                text-align: center;
            }
            #horizontal-gallery div { 
                margin:0 20px !important;
                display: inline-block;
            }
            #horizontal-gallery h2{
                color:#3B3838;
            }	

<div id="horizontal-gallery">
  <div id="research-img">
    <img src="/public/assets/Lozko4.png" alt="" width="180" height="180" />
    <h2>HELLO WORLD</h2>
  </div>
  <div id="research-img">
    <img src="/public/assets/Lozko4.png" alt="" width="180" height="180" />
    <h2>HELLO WORLD</h2>
  </div>
</div>

Dziękuje za pomoc wszystkim :))