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)