Center align multiple lines of text in a button using CSS

I'm trying to create a button in CSS with an image as a background. So far I have been able to get it to work, as long as the Text is only one line.

Now I'm trying to get it to work with a two line button, but it is either braking the layout or like in the jsfiddle not showing the second line.

Here is my CSS section:

@font-face {
  font-family: 'easy_street_eps';
  src: url('http://www.fontsaddict.com/fontface/easy-street-eps.ttf');
}

#gallery {
  list-style: none;
  list-style-type: none;
}

#gallery a {
  text-decoration: none;
  color: #FFF;
}

#gallery a:hover {  text-decoration:underline;}
#gallery ul { -webkit-padding-start: 0px; }

#gallery li {
  padding: 0 20px 0 0;
  display: inline;
  background:url("http://imageshack.com/a/img843/2751/gidy.png") no-repeat scroll 0% 0%;
  font-family: "easy_street_eps";
  font-size:35px;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  min-width: 200px;
  min-height: 140px;
  float:left;
  line-height : 140px;
  padding-top: 4.25px;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
}

.gallery2lb {
  line-height: 20px;
  width: 100px;
  max-height: 140px;
}

Here is the jsfiddle: http://jsfiddle.net/2vMPs/

Any help is very much appreciated.

thanks, Alex


Demo

Defining the parent <li> as display: table and the element <a> itself with vertical-align:middle & display:table-cell, and removing the other unwanted styles as the this will take care of issue.

CSS

li {
    display: table;
}
a {
    display: table-cell;
    vertical-align: middle;
}

@font-face {
    font-family:'easy_street_eps';
    src: url('http://www.fontsaddict.com/fontface/easy-street-eps.ttf');
}    

#gallery {
    list-style: none;
    list-style-type: none;
}
#gallery a {
    text-decoration: none;
    color: #FFF;
}
#gallery a:hover {
    text-decoration:underline;
}
#gallery ul {
    -webkit-padding-start: 0px;
}
#gallery li {
    /*padding: 0 20px 0 0;*/
    /* display: inline; */
    background:url("http://imageshack.com/a/img843/2751/gidy.png") no-repeat scroll 0% 0%;
    font-family:"easy_street_eps";
    font-size:35px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    min-width: 200px;
    min-height: 150px;
    float:left;
    /* line-height : 140px;
    padding-top: 4.25 px; */
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}
.gallery2lb {
    /* line-height: 20px; */
    width: 100px;
    max-height: 140px;
}

HTML

<div style="text-align: center;">
    <div id="gallery">
        <ul>
            <li><a title="Candyland" href="#">Candyland</a>

            </li>
            <li class="gallery2lb"><a title="Diese Seite befindet sich noch im Aufbau" href="#">Alice in Wonderland</a>

            </li>
            <li><a title="Arielle" href="#">Arielle</a>

            </li>
            <li><a title="Rainbow" href="#">Rainbow</a>

            </li>
        </ul>
    </div>
</div>