How to vertically center-align one-line and two-line menu labels?

I encountered a situation for top page menu in Atahualpa:

The top page menu has six menu items (each has own drop-down menu). Of the six menu labels, two are very long and I have to break them into two lines. Now all the labels are vertically top-aligned, is there a way to make them center-aligned using HTML/CSS inserts? Need expert's help! sandbox site: http:---------------

We tried many approaches without success, current HTML/CSS inserts:

/* ======================= */
/* top level menu items */
/* ======================= */
div#menu1 ul.rMenu-hor li.rMenu-expand a,
div#menu1 ul.rMenu li a,
div#menu1 ul.rMenu li.rMenu-expand a {
background: none;
height: 55px;
line-height: 16px;
padding: 0;
margin: 0;
}

div#menu1 ul.rMenu li.rMenu-expand li a,
div#menu1 ul.rMenu li.rMenu-expand li li a,
div#menu1 ul.rMenu li.rMenu-expand li li li a {
height: auto;
}

div#menu1 ul.rMenu-hor li.rMenu-expand a span,
div#menu1 ul.rMenu li a span,
div#menu1 ul.rMenu li.rMenu-expand a span {
padding: 10px 24px 8px 11px !important;
margin: 0;
display: block;
}

div#menu1 ul.rMenu-hor li.rMenu-expand a { padding: 0 !important; }

div#menu1 ul.rMenu li.current_page_item,
div#menu1 ul.rMenu li.current_page_item a,
div#menu1 ul.rMenu li.current-menu-item,
div#menu1 ul.rMenu li.current-menu-item a,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:active,
div#menu1 ul.rMenu li:hover a,
div#menu1 ul.rMenu li.current-menu-parent,
div#menu1 ul.rMenu li.current-menu-parent a {
color: #fff;
}

div#menu1 ul.rMenu li li {
background: #fefef6;
}

/* ======================= */
/* second level menu items */
/* ======================= */

div#menu1 ul.rMenu li ul.rMenu-ver li a {
color: #3a3a3a;
background: #ececec;
font-size: 13px;
padding: 0;
text-align: left;
height: auto;
}

div#menu1 ul.rMenu li.rMenu-expand li a span,
div#menu1 ul.rMenu li.rMenu-expand li li a span,
div#menu1 ul.rMenu li.rMenu-expand li li li a span {
padding: 11px 4px 10px 12px !important;
}

/* second level menu hover */
div#menu1 ul.rMenu li ul.rMenu-ver li a:hover {
color: #fff;
background: #959595;
}

/* second level current item */
div#menu1 ul.rMenu li ul.rMenu-ver li.current_page_item a,
div#menu1 ul.rMenu li ul.rMenu ver li.current-menu-item a {
color: #fff;
background: #959595;
}

div#menu1 ul.rMenu li.current_page_item ul.rMenu-ver li a:hover,
div#menu1 ul.rMenu li.current-menu-item ul.rMenu-ver li a:hover {
color: #fff;
background: none;
}