This is a migrated thread and some comments may be shown as answers.

how to center the Kendo UI Menu?

3 Answers 374 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 21 Nov 2012, 03:48 AM
I can't seem to center the Kendo UI Menu on a page.  It is always left aligned.  I can center the text on it using text-align:center, but I want to center the entire menu on a page and then have the text be left aligned.  So far I have not had any luck.  It seems like it should be an easy thing to do.

Anyone?

I've attatched an image of the menu how it currently looks.  If you look at it, I am using my own menu (in green) on the top that is centered. I am then using the Kendo UI Menu on the bottom (in black).  The problem is that I can't seem to center the menu.  I can get the text in each of the menu items to be centered, but I need the whole menu to be centered on the page like the top green menu.

Anyone know how to do this?  Can it be done?  What do I need to do to center it.  Anyone have an example of the Kendo UI Menu being centered on a page?

3 Answers, 1 is accepted

Sort by
0
Kyle
Top achievements
Rank 1
answered on 15 Mar 2013, 02:50 PM
I would like to know this as well. Has anyone else been able to figure out how to center a Kendo UI menu? I tried applying text-align:center to an outer div, but that just caused the menu elements to be centered and not the menu itself.
0
Kamen Bundev
Telerik team
answered on 15 Mar 2013, 03:20 PM
Hi Kyle,

You can use text-align center and display: inline-block to do it, check this jsBin:


Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Adrian
Top achievements
Rank 1
answered on 19 Mar 2013, 04:33 PM
Here's a simple solution that worked for me:

/* centers menu */
.k-item.k-state-default.k-first
{
    margin-left: 20%;
}
Tags
Menu
Asked by
Dan
Top achievements
Rank 1
Answers by
Kyle
Top achievements
Rank 1
Kamen Bundev
Telerik team
Adrian
Top achievements
Rank 1
Share this question
or