Problemy z pozycjonowaniem dwóch grafik i i dwóch-trzech liter między nimi

Cześć Wam. Mam prośbę dopiero zacząłem przygodę z css i html. Chcę umieścić na stronie coś w stylu informacji o następnym meczu, czyli div a na nim dwa herby, między nimi coś w stylu napisu "VS lub dwukropka cokolwiek" Właśnie jak teraz między te dwie grafiki włożyć napis i wyśrodkować go w pionie względem diva na którym to wszystko będzie umieszczone a potem od "VS" ładnie zrobić margines jedno w prawo drugie w lewo np. po 3%

.club1{
margines-left: 3%;}

Piszę o tym, bo teraz chyba przez display:inline-block te marginesy dziwnie się rozciągają. Jak dam tylko na jeden .club1 margines 30% to dopiero widać że się przesunęło przy 3% prawie że nie drgnie... Próbuje na wszystkie sposoby i zawsze coś się po sypie. Potrzebuje pomocy jak to poskładać by miało to ręce i nogi.

<div id="nextmatchcontent">
      <div class="nextmatch">
        <div id="club1"> 	 
  	     <img src="img/Aris.png">
          <p>Aris</p>
        </div>      
      </div>
 
    <div class="nextmatch">
        <div id="club2"> 	 
  	     <img src="img/Panathinaikos.png">
           <p>Panathinaikos</p>
        </div>
      </div> 
  	   
  	</div>

i css

#nextmatchcontent{  
   background: #191919;
   text-align: center;
   color: #FFFFFF}

.nextmatch{
	display:inline-block;}

.club1{
margines-right: 3%;}
club2{
margines-left: 3%;}