unable to get Text in RootGroup to be Vertically Align into the Centre

[David]

i've been searching for a way to get the Text of my Menu to be in the middle of the Tab. I've found different Forum posts, seemingly about the same thing as me, but they dont seem to work.
here is my code so far

<div style="height:20%;padding-top:50px;">
           <telerik:RadMenu ID="RadMenu1" Style="float:right;" Flow="Horizontal" runat="server">

          <Items>
              <telerik:RadMenuItem text="Messages"></telerik:RadMenuItem>
              <telerik:RadMenuItem Text="Stock"></telerik:RadMenuItem>
              <telerik:RadMenuItem Text="Cash"></telerik:RadMenuItem>
              <telerik:RadMenuItem Text="Staff"></telerik:RadMenuItem>
              <telerik:RadMenuItem Text="Reports"></telerik:RadMenuItem>
              <telerik:RadMenuItem Selected="true" Text="Stock Admin" >
                 <GroupSettings Flow="Vertical" />
                  <Items>
                      <telerik:RadMenuItem Text="Admin"></telerik:RadMenuItem>
                      <telerik:RadMenuItem Text="Stock Admin"></telerik:RadMenuItem>
                  </Items>
              </telerik:RadMenuItem>
          </Items>
      </telerik:RadMenu>
       </div>

/*RadMenu Styles*/
/*This is the new Menu that is on the Header.ascx control*/


    /*http://demos.telerik.com/aspnet-ajax/grid/examples/styles/customskin/MyCustomSkin/menu.MyCustomSkin.css*/


    .RadMenu_Default .rmGroup .rmLink {
        padding-left: 0px ;      /*these two will give the Sub Menu Items their styling*/
    }
    .RadMenu_Default .rmGroup .rmLink .rmText {
        padding-left: 5px ;      /*these two will give the Sub Menu Items their styling*/
    }

    .RadMenu_Default  .rmRootGroup  .rmSelected
    {
        background:#f7931d; /*what happens when the Tab is 'Selected'*/

    }


    div.RadMenu .rmRootGroup
    {
        /*all the border tags here, remove the black border that went round the entire Menu Control*/
        border-width:0px;
        border-bottom:5px solid #f7931d;

    }



    div.RadMenu .rmGroup .rmItem .rmText
    {
        text-align:left;
    }

    .RadMenu_Default .rmRootGroup .rmItem .rmText
    {
        text-align:center;

        /*the Border tags help to seperate each Root Menu Tab to make it look like its a seperate entity*/
        border-left:solid;
        border-right:solid;
        border-left-color:white;
        border-right-color:white;


        width:70px; /*width of each Root Menu Items*/
        /*height:35px;    height of each Root Menu Items*/
        height:35px;
        color:#979797; /*colour of the text on Root and Sub Menu Tabs*/
        font-family:Helvetica, Arial, sans-serif;
    }



    .RadMenu_Default .rmRootLink:hover span.rmText
    {
        /*this sets the text white for the Root Menu Items only, when hovering over the Root Menu Item*/
       color:white;
    }

    .RadMenu_Default .rmGroup .rmLink:hover span.rmText
    {
        /*This sets the text white when hovering over the Sub Menu Items.*/
        color:white;

    }

    .RadMenu_Default .rmGroup .rmText
    {
        /*the border and background properties will remove the block on the left side of the Sub Menu Items where an icon would usually be placed.*/
         border: 1px solid #979797 ;
         background: #f0f0f0 ;

    }

    .RadMenu_Default .rmText:hover
    {
        background:#f7931d; /*background of tabs when moused over*/
        cursor: pointer; cursor: hand;
    }

    .RadMenu_Default .rmRootGroup
    {
        background: #f0f0f0 ;  /*specify the colour of the Root Tabs. Without doing this, it gives a gradient colour scheme from top to bottom*/
    }

    .RadMenu_Default
    {
        width:598px; /*width of the entire control*/
    }

/*RadMenu Styles*/

currently, the text in the Tabs (e.g 'Messages','Stock','Staff' etc) are Horizontally align so that they are in the centre of their respective Tabs - but Vertically, they are at the top.
I would like to get it so that the text is slap-bang in the middle, Vertically as well as Horizontally.

Is this possible?
i've attached an image of how my menu looks. i've put black crosses in the places that i would like the text to be. i drew the black crosses free-hand, so their not perfectly central (i would like it to be perfectly central in my Application), but my idea is to give a visual representation of what i'm talking about.


cheers

[Shinu]

Hi David,

Please check the following modification I applied to your CSS.

CSS:

.RadMenu_Default .rmRootGroup .rmItem .rmText

{

    text-align: center; /*the Border tags help to seperate each Root Menu Tab to make it look like its a seperate entity*/

    border-left: solid;

    border-right: solid;

    border-left-color: white;

    border-right-color: white;

    width: 70px; /*width of each Root Menu Items*/ /*height:35px;    height of each Root Menu Items*/

    height: 35px;

    color: #979797; /*colour of the text on Root and Sub Menu Tabs*/

    font-family: Helvetica, Arial, sans-serif;

  line-height: 40px;

}

Thanks,
Shinu.

[David]

thats wonderful, Shinu! You've helped me a lot with my Menu.

[Keith]

Hi Shinu,

I cannot use the line-height option because some of my navigation labels consist of 2 lines of text and the line height pushes the second line off the menu. Do you have any other suggestions for achieving vertical central alignment please.

Keith

[Magdalena]

Hi Keith,

You can achieve vertical alignment with the "display:table-cell" approach:

html .RadMenu_Default .rmHorizontal .rmRootLink span.rmText {
    display: table-cell;
    float: none;
    vertical-align: middle;
    height: 35px;
}

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

[Keith]

Thanks Magdalena,

That works great the other issue I have is trying to get the RadMenu to fill 100% of the width. It seems I have to set  the width of the individual items  to best fill the width, setting width =100% seems to destroy the menu. By default the width is set to the nav link text width but I would like the menu to be more responsive.

Thanks

Keith

[Magdalena]

Hello Keith,

Could you please open a support ticket and provide us with a runnable sample with 2 screenshots so we will assist you in more efficient way?

The screenshot should be the following:

1. the current layout
2. the expected layout

Looking forward to your reply.

Regards,
Magdalena
Telerik