Thank you auslin for that suggestion. It works well as a stop-gap solution to centering the link text within their respective divs. However, as you mentioned, centering the 2-line link "closer together" is desired, as otherwise it looks quite unfinished.
Unfortunately, I have not been able to get felgall's suggested method of using table alignment to properly affect my code. I can get it to work with simple tables in other examples, but I have a lot of trouble applying it to my existing work. For now I will simply use the line-height method with a special class for the 2-line link. I may ultimately decide to change the wording of that link to make it one line for convenience.
Not to ask you to do my work for me, but I have tried several times to get the table alignment method to apply to my code but I have not gotten any success. If you are able to make it work so that the 2-line link appears closer together, I would really appreciate it
I'm not sure if the trouble I'm having is coming from improperly placing the valign style, or if it's coming from improperly placing the display:table(-cell) styles. Just can't seem to get it right.
EDIT >> As a solution (albeit a messy one) I simply wrapped the two lines of text in a div of its own, and gave that div the attribute
height:55px; padding-top:5px;. This achieved the effect of centering the two lines without separating them as they would when using the
line-height:30px; method (noting that the height of the
.tab-container divs was universally 60px)