如何将文本垂直对齐到框的中心？

Question

在 safari 中，我无法将文本移动到框的中间。 它总是在顶部。如何让文本留在框的中间？

这是我正在处理的代码： http://jsfiddle.net/cyberjo50/B62XX/

#menu {
clear: both;
height: auto;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
/*padding:10px;*/
margin: 5px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
font-style: normal;
font-weight: 400px;
flex-flow: row wrap;
justify-content: space-around;
}

#menu a:link {
display: block;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:visited {
display: block;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:hover {
display: block;
color: #fff;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:active {
display:block;
color: #fff;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-style: normal;
font-weight: bold;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}

提前致谢

Answer 1

尝试将其添加到 #menu 的 css 中，并进一步使用数字和调整：

text-align:center; line-height:50px;