Bootstrap导航丸中的垂直对齐文本

Question

我有这个： http://jsfiddle.net/frankDraws/29tvLqzc/

我无法弄清楚如何垂直居中/对齐nav-pills内的2行文字。我可以将单行文本居中，但是双行是关闭的。

顺便说一下，我需要保持所有nav-pills相同的高度。

＆＃13;

＆＃13;

.top-bar,
.contain-to-grid {
	height: auto;
	margin: 20px auto 20px;
	background-color: transparent; }

/* Flipped Menu and Nav Pills */
.flipped-menu {
	margin:auto;
	height: auto;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
	-sand-transform: rotate(180deg);
	-ms-filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
	filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2);
}/* /end flipped menu */
#nav-welcome > span {
	display: table-cell;
	vertical-align: middle;
	line-height: 0;
}
.nav-pills > li > a {
	border-radius: 0 !important;
	background-color: #8bbff3;
	color: #031831; /* #005b7f */
	font-weight: 700;
	font-size: 16px;
	box-shadow: 0 -1px 4px rgba(0,0,0,.2);
	border: 0;
    height: 65px;
    width: 95%;
	margin-left: 5%;
	box-shadow: 0 0 7px rgba(0,0,0,.7);

}

 /* center's single copy text 

	 
 */
.nav-pills > li > a:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align: middle;
}/* end single line alignment */


.nav-pills > li.active > a, 
.nav-pills > li.active > a:hover {
	color:#fff!important;
	cursor:default;
	background-color:#00356B !important;
	border:0;
	border-bottom-color:transparent;
}
.nav-pills > li > a:hover: {
	border-radius:0;
	background:#00356B;
	color:#fff;
}
.navigation {
	margin-bottom:30px;
	margin-top:20px;
	margin-right:-30px;
	
}
.navigation ul li {
	margin:0 7px 0;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
    <div class="col-md-12">
        <script type="text/javascript" src="js/nav.js"></script>
        <div class="row text-center navigation">
            <ul class="nav nav-pills flipped-menu nav-justified">
                <li id="nav-welcome"><a class="align" href="index.html"><span>WELCOME</span></a>
                </li>
                <li id="nav-map" class="active"><a href="map.html">MAP</a>
                </li>
                <li id="nav-annual-passes"><a href="annual-passes.html">ANNUAL<br>PASSES</a>
                </li>
                <li id="nav-tickets-express"><a href="#">TICKETS + EXPRESS</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;