Arrange text under icons - html

Question

i have a problem with a menu i am making, i want it to be something like:
<icon> <icon> <icon>
Title Longer Title
Title
now i have it like this:
<icon>
<icon> longer <icon>
Title Title Title
I made the menu using lists like this (Copy from actual code)
<ul>
<li>
<img src="images/buton1.png" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</li>
</ul>
and the css styles are like this
.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
}
Thanks alot, if you have any questions please ask. Thank you.

Answer 1

li {
display: table-cell;
vertical-align: top;
width: 90px;
padding: 5px;
}
<ul>
<li>
<img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</li>
<li>
<img src="http://placephant.com/80/80" class="butonmeniu"><h2 class="meniufont" >Info utile Into utile</h2>
</li>
</ul>

Answer 2

Your li are using display:inline-block
Add vertical-align:top to the li as the default there is baseline.
.meniufont {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
font-weight: normal;
color: #434446;
}
.butonmeniu {
display: block;
}
li {
display: inline-block;
text-align: center;
margin: 0 10px;
vertical-align: top;
}
<div class="menu">
<ul>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20" class="butonmeniu">
<h2 class="meniufont">Title</h2>
</a>
</li>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20">
<h2 class="meniufont textjos">Longer <br>Title</h2>
</a>
</li>
<li>
<a href="#">
<img src="http://www.fillmurray.com/g/20/20">
<h2 class="meniufont">Title</h2>
</a>
</li>
</ul>
</div>

Answer 3

Sup!
I toyed around with what I thought you were trying to achieve.
See this pen : Codepen Link
#nav { list-style : none;}
.nav-item {
display: inline-block;
width: 100px; /* Make it whatever you want */
}
.meniufont{
font-family:'Open Sans', sans-serif;
font-size:15px;
margin-right:10px;
text-align: center;
font-weight:normal;
color:#434446;
}
.butonmeniu{
display:block;
margin: auto;
width: 100%;
}
<ul id="nav">
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
<li class="nav-item">
<a href="#">
<img src="http://placehold.it/350x150" class="butonmeniu"><h2 class="meniufont" >Info utile</h2>
</a>
</li>
</ul>