Wyśrodkowanie obrazka w poziomie - Bootstrap

Question

<div id="link0a">

<div class="thumbnail col-lg-6 col-md-6 col-sm-6 col-xs-12" style="color:black; background: linear-gradient( 45deg, lightblue, lightgreen );">

<div class="obrazek">

<div class="overlayImg">

<img class="pokaz" src="img/trzciel.gif">
<a href="#" target="_blank"><span class="rrr"><p style="margin-top:90px; line-height:20px; color:white; font-size:25px;font-weight:bold;">Trzeciel<br/><br/><br/><span style="font-size:16px; font-weight:normal;">tel. 95........<br/>tel. 601....<br/>.....@wp.pl</span></p></span></a>

</div>

</div>

<div class="caption text-center pokaz">
<h3 class="text-center">Zapraszamy</h3>
<h4 class="text-center">pn-czw.</h4>
<p  class="text-center">Adres<br>
tel. 95 ..........<br/>
tel. 601 ...........<br/>
E-mail: <a href="#">..........</a></p>
<p  class="text-center"  style="color:red; font-weight:bold;">Uwaga!!!<br>
<p  class="text-center"  style="color:red;"> Cennik usług dostępny jest na tej stronie.</p><br/><br/>
<div class="text-center"><button class="btn btn-success pokaz" data-toggle="modal" data-target="#myModal3">Wyślij wiadomość</button></div><br/><br/>

</div>
</div>

<div class="thumbnail col-lg-6 col-md-6 col-sm-6 col-xs-12" style="color:black; background: linear-gradient( 45deg, lightblue, lightgreen );">

<div class="obrazek">

<div class="overlayImg">

<img class="pokaz" src="img/bukowska.jpg">
<a href="#" target="_blank"><span class="rrr"><p style="margin-top:90px; line-height:20px; color:white; font-size:25px;font-weight:bold;">Poznań<br/><br/><br/><span style="font-size:16px; font-weight:normal;">tel. 61 .....<br/>tel. 603 .......<br/>.....@wp.pl<</span></p></span></a>

</div>

</div>

<div class="caption text-center pokaz">
<h3 class="text-center">Zapraszamy</h3>
<h4 class="text-center">pn-pt.</h4>
<p  class="text-center">Adres<br/>
tel. 61..........<br/>
tel. 601.........<br/>
E-mail: <a href="#">...........@wp.pl</a></p>
<p  class="text-center" style="color:red; font-weight:bold;">Uwaga!!!<br/>
<p  class="text-center" style="color:red;">Cennik usług dostępny jest na <a href="#">Poznań.</a></p><br/><br/>
<div class="text-center"><button class="btn btn-success pokaz" data-toggle="modal" data-target="#myModal4">Wyślij wiadomość</button></div><br/><br/>

</div>
</div>

</div>

CSS:

 

.obrazek
{
position:relative;	
margin-top:30px;
}

.overlayImg
{
	width:252px;	
	height:300px;
}

.overlayImg .rrr
{
	position:absolute;
	display:block;
	width:252px;
	height:300px;
	background-color:#27a38d;
	left:0;
	top:0;
	opacity:0;
	transition: opacity 0.5s ease-in-out;
	
}

.overlayImg:hover .rrr
{
opacity:0.8;	
}

Oto efekt nie pożądany ;)

 

A chciabym,żeby obrazki były wyśrodkowane w poziomie ;) Hmmmm Z góry dzięki 

Answer 1

<div class="row">
<div class="col-sm col-sm-6">obrazek</div>
<div class="col-sm col-sm-6>formularz</div>
</div>

Pisane z głowy.