centering images in line

hello good day.

i am trying to add images (inside a module) with hover effects in my university template, i want to center them. i'm trying it in the css override, i'm newbie in programming so i guess that limits me, sorry but i'm trying my best. can anyone help? this is the custom html codes.

<div class="gkIcons">
<div id="tlimage1">
<div id="tloverlay" style="text-align: left;"><span id="tlplus">+</span></div>
</div>
<div id="tlimage2" style="text-align: center;">
<div id="tloverlay" style="text-align: left;"><span id="tlplus">+</span></div>
</div>
<div id="tlimage3" style="text-align: center;">
<div id="tloverlay" style="text-align: left;"><span id="tlplus">+</span></div>
</div>
<div id="tlimage4" style="text-align: center;">
<div id="tloverlay" style="text-align: left;"><span id="tlplus">+</span></div>
</div>
<div id="tlimage5" style="text-align: center;">
<div id="tloverlay" style="text-align: left;"><span id="tlplus">+</span></div>
</div>
<div id="tlimage6">
<div id="tloverlay" style="text-align: left;"><span id="tlplus">+</span></div>
</div>
</div>

this is the css code

#tloverlay { background:rgba(0,0,0,.75);
background-size:cover;
text-align:center;
opacity:0;
padding:100px 100px 125px 100px;
-webkit-transition: opacity .90s ease;
-moz-transition: opacity .90s ease;}

#tlplus { font-family:Helvetica;
font-weight:300;
color:rgba(255,255,255,.85);
font-size:24px;}

#tlimage1, #tlimage2, #tlimage3, #tlimage4, #tlimage5, #tlimage6 {
width:200px;
height:250px;}

#tlimage1 {

background-repeat: no-repeat;
background-position: left;
background-size:inherit;
background:url("/images/Conference-Overview.gif");
overflow:hidden;
}


#tlimage1:hover #tloverlay {
opacity:1;}

#tlimage2 {
background-repeat: no-repeat;
background-position: left;
background-size:inherit;
background:url("/images/bigstock-Business-Conference-38466316.jpg");
overflow:hidden;}

#tlimage2:hover #tloverlay {
opacity:1;}

#tlimage3 {
background-repeat: no-repeat;
background-position: left;
background-size:inherit;
background:url("/images/GES1.jpg");
overflow:hidden;}

#tlimage3:hover #tloverlay {
opacity:1;}


#tlimage4 {
background-repeat: no-repeat;
background-position: left;
background-size:inherit;
background:url("/images/888.jpg");
overflow:hidden;}

#tlimage4:hover #tloverlay {
opacity:1;}

#tlimage5 {
background-repeat: no-repeat;
background-position: left;
background-size:inherit;
background:url("/images/blue.png");
overflow:hidden;}

#tlimage5:hover #tloverlay {
opacity:1;}

#tlimage6 {
background-repeat: no-repeat;
background-position: left;
background-size:inherit;
background:url("/images/green.png");
overflow:hidden;}

#tlimage6:hover #tloverlay {
opacity:1;}

attached is a snapshot. thanks

Sadly you are trying to create something on your own - only other developers might help you, no support from gavick team as we don't support custom/3rd party solutions.

Also if you would like anyone to help you, provide url to the site, because only seeing your code could allow to check whats wrong.