[Solved] Vertical alignment of menu items

[Dave]

Hi,

I can't for the life of me figure out how to vertically align the text in the menu items. I have a horizontal menu with a number of top-level menu items. Some of the items' text property is wrapped over two lines by using Encoded(false) and applying HTML to the Text() property. I want the single-line items to line up vertically to the center of the two-line items. How is this possible?

Thanks,
Dave

[Kamen Bundev]

Hi Dave,

The easiest way to do that is by using display: table-cell and vertical align: middle. Something like this:
#Menu > .t-item > .t-link
{
    display: table-cell;
    height: 50px;
    vertical-align: middle;
}

However this won't work in older browsers like IE6/7. There is a way to do this in them with several other wrappers, but unfortunately they involve position: absolute and you will need to have set width of your items, let me know if you need this additional solution. Another way is with expressions, but I'm advising against it as it will probably have severe performance penalties.

Greetings,
Kamen Bundev
the Telerik team

[Dave]

Yes, please supply me with the additional solution.

Thanks,
Dave

[Kamen Bundev]

Hello Dave,

Without CSS expressions:
Add two elements on documentReady (in your case you may do it your way, though the menu down arrows can't be wrapped with Encoded(false)):
<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {%>
    if ($.browser.msie && $.browser.version <= 7)
        $("#Menu > .t-item > .t-link").each( function () { $(this).contents().wrapAll("<span class='vAlign'/>").wrapAll("<span class='vAlignContent'/>") } );
<%}); %>
Use this CSS, adjust the .t-link width/height and the margin as necessary:
#Menu > .t-item > .t-link
{
    display: table-cell;
    height: 50px;
    width: 60px;
    vertical-align: middle;
}
.t-menu .vAlign
{
    position: absolute;
    width: 100%;
    top: 50%;
    margin: 0 -0.97em; /* Compensate the default MVC .t-link padding, adjust accordingly to yours */
}
.t-menu .vAlignContent
{
    position: relative;
    width: 100%;
    top: -50%;
}

With CSS expressions (the good thing in this method is that you don't need to force specify the widths):
You will only need one element:
<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {%>
    if ($.browser.msie && $.browser.version <= 7)
        $("#Menu > .t-item > .t-link").each( function () { $(this).contents().wrapAll("<span class='vAlign'/>") } );
<%}); %>
And CSS is much shorter:
#Menu > .t-item > .t-link
{
    display: table-cell;
    height: 50px;
    vertical-align: middle;
}
.t-menu .vAlign
{
    position: relative;
    display: block;
    top: expression((parentNode.offsetHeight - this.offsetHeight - 4) / 2);
}

Let me know if they work for you.

Best wishes,
Kamen Bundev
the Telerik team