Html 使用CSS将按钮中的多行文本居中对齐

我试图在CSS中创建一个以图像为背景的按钮。 到目前为止，我已经能够让它工作，只要文本只有一行

现在，我试图让它使用两行按钮，但它要么停止布局，要么像JSFIDLE中那样不显示第二行

以下是我的CSS部分：

@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;
}

以下是JSFIDLE：

非常感谢您的帮助

谢谢，

---

Alex

您可以使用

em

调整文本所在父容器上的

字体大小

#gallery a {
    text-decoration: none;
    color: #FFF;
    font-size: 0.6em; 
}


您还可以使用而不是字体大小
vh
是CSS新的视口大小的排版

font-size:4.2vh;

但是，另一种技术（对于所有按钮）并不一致，即在
#gallery li
上更改此选项：

line-height : 30px;
padding-top: 30px;

这将为您提供如下信息：


将父级
定义为
display:table
和元素









您不能将多行文字与
行高垂直居中对齐。相反，如果古老的浏览器支持不是问题，您可以通过在

display: flex;
justify-content: center;
align-items: center;


如果需要旧浏览器支持，您可以使用
中提到的
display:table
方法设置行高：40px，并在
处提供padding top:10px。
<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>

display: flex;
justify-content: center;
align-items: center;