Align the text/picture within a tile - html

Question

On left side you see my current state, on the right side I have used a image-editing programm to show how I want that the tiles looks like. I have tried a bit, but every time when I tried to add for example the "xxx" text, the whole tile has been moved up. I would appreciate it, when someone could solve it for me.
.main {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #AAAAAA;
}
.main .inner {
padding: 5px;
font-size: 0px;
display: table;
margin-left: auto;
margin-right: auto;
}
.main .inner:hover {
opacity: 0.8;
background-color: #2e8bcc;
}
.tile h2 {
font-size: 20px;
color: #FFF;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
line-height: 1.1;
text-align: center;
}
.tile {
margin: 0px;
padding: 0px;
height: 190px;
width: 190px;
border: 5px solid #AAAAAA;
opacity: 8;
background-color: #2980b9;
display: inline-block;
}
.body {
background-color: #AAAAAA;
}
<div class="main">
<div class="inner">
<div class="tile">
<h2>Name 1</h2>
</div>
<div class="tile">
<h2>Name 2</h2>
</div>
<div class="tile">
<h2>Name 3</h2>
</div>
<div class="tile">
<h2>Name 4</h2>
</div>
<div class="tile">
<h2>Name 5</h2>
</div>
<div class="tile">
<h2>Name 6</h2>
</div>
<div class="tile">
<h2>Name 6</h2>
</div>
<div class="tile">
<h2>Name 7</h2>
</div>
</div>
</div>

Answer 1

I don't see any problem with your code. I've only added
.tile {
font-size: 16px;
color: #fff;
text-align: center;
}
.main {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #AAAAAA;
}
.main .inner {
padding: 5px;
font-size: 0px;
display: table;
margin-left: auto;
margin-right: auto;
}
.main .inner:hover {
opacity: 0.8;
background-color: #2e8bcc;
}
.tile h2 {
font-size: 20px;
color: #FFF;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
line-height: 1.1;
text-align: center;
}
.tile {
margin: 0px;
padding: 0px;
height: 190px;
width: 190px;
border: 5px solid #AAAAAA;
opacity: 8;
background-color: #2980b9;
display: inline-block;
font-size: 16px;
color: #fff;
text-align: center;
}
.body {
background-color: #AAAAAA;
}
<div class="main">
<div class="inner">
<div class="tile">
<h2>Name 1</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
<div class="tile">
<h2>Name 2</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
<div class="tile">
<h2>Name 3</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
<div class="tile">
<h2>Name 4</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
<div class="tile">
<h2>Name 5</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
<div class="tile">
<h2>Name 6</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
<div class="tile">
<h2>Name 6</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
<div class="tile">
<h2>Name 7</h2>
<img src="http://placehold.it/100x100">
<div>xxxxx</div>
</div>
</div>
</div>

Answer 2

Just add float:left to .tile div and it will work fine
.main {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #AAAAAA;
}
.main .inner {
padding: 5px;
font-size: 0px;
display: table;
margin-left: auto;
margin-right: auto;
}
.main .inner:hover {
opacity: 0.8;
background-color: #2e8bcc;
}
.tile h2 {
font-size: 20px;
color: #FFF;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
line-height: 1.1;
text-align: center;
}
.tile {
float:left;
margin: 0px;
padding: 0px;
height: 190px;
width: 190px;
border: 5px solid #AAAAAA;
opacity: 8;
background-color: #2980b9;
display: inline-block;
}
.body {
background-color: #AAAAAA;
}
<div class="main">
<div class="inner">
<div class="tile">
<h2>Name 1</h2>
<h4>xxxxxx</h>
</div>
<div class="tile">
<h2>Name 2</h2>
</div>
<div class="tile">
<h2>Name 3</h2>
</div>
<div class="tile">
<h2>Name 4</h2>
</div>
<div class="tile">
<h2>Name 5</h2>
</div>
<div class="tile">
<h2>Name 6</h2>
</div>
<div class="tile">
<h2>Name 6</h2>
</div>
<div class="tile">
<h2>Name 7</h2>
</div>
</div>
</div>