how to center the Kendo UI Menu?

4 posts, 0 answers
  1. Dan
    Dan avatar
    1 posts
    Member since:
    Oct 2010

    Posted 20 Nov 2012 Link to this post

    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?

  2. Kyle
    Kyle avatar
    16 posts
    Member since:
    Apr 2012

    Posted 15 Mar 2013 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Mar 2013 Link to this post

    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!
  5. Adrian
    Adrian avatar
    1 posts
    Member since:
    Jan 2013

    Posted 19 Mar 2013 Link to this post

    Here's a simple solution that worked for me:

    /* centers menu */
    .k-item.k-state-default.k-first
    {
        margin-left: 20%;
    }
Back to Top
Kendo UI is VS 2017 Ready