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?:confused: 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;
}

try adding this

I read your question a couple of times and if you are asking how to vertically center the menu items this code may work.
The overflow line is so that the bottom of the repositioned item doesn't show. You could alternatively give each of the single line menu items a class in the Appearance > Menus and then just use that class instead of the three IDs.

Thank you so much juggledad and lmilesw for your fast reply!!
Yeh, it's not easy to describe the issue with my language, sorry.

lmilesw guessed it right, and the method worked, but the [overflow: hidden;] is making the drop-down disappear. Any possible fix? thanks again!

Oops... didn't check that. Just take that hidden line out. The issue you get is some display issues on the bottom of the double line menu items. I fiddled a bit and didn't come up with a quick solution though.