Center align multiple lines of text in a button using CSS - html

Question

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

Answer 1

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>

Answer 2

You can use em to adjust the font-size on your parent container where the text resides.
#gallery a {
text-decoration: none;
color: #FFF;
font-size: 0.6em;
}
You can also use instead of font-size. vh is CSS new viewport sized typography.
font-size:4.2vh;
Another technique, however, not consistent (for all buttons is) to change this on #gallery li:
line-height : 30px;
padding-top: 30px;
This will give you something like this:

Answer 3

You can't vertically center align multiline text with line-height. Instead, if ancient browser support is not an issue, you can use css3 flexible boxes for centering by adding the following to <li>
display: flex;
justify-content: center;
align-items: center;
Updated fiddle
If older browser support is a requirement you can go with the display:table method mentioned in this answer