1

I am trying to center align the text of kendo menu as per the div it contains. This is the navbar in an aurelia app, and its always in top. I want to center align it. If I do a top-margin, then the hover get disturbed. Here is what I have now, the height is as per the navbar. However, the menu text is not center aligned. Any help is appreciated!

.k-widget.k-menu,
.k-menu .k-group .k-popup .k-separator
{
    border:0px;



}
.k-item .k-link
{
    display: inline-block; 
    height:50px;
    vertical-align: center;
    color: white;  

}

.k-group .k-item
{
    height:30px;

}
.k-widget.k-menu-horizontal > .k-item{
   border-right: none;
}
.k-state-hover:hover
{

    background-color:rgba(0, 0, 0, 0.1);
}
.k-group .k-state-hover:hover 
{        
    background-color:rgba(0, 0, 0, 0.1);
}
genericuser
  • 1,430
  • 4
  • 22
  • 40
  • Can you create a [jsFiddle](https://jsfiddle.com) with what you have so far? – Sunny Patel Jun 20 '16 at 19:50
  • https://jsfiddle.net/u60u57bg/2/ - this doesnt run though – genericuser Jun 21 '16 at 00:33
  • Sorry, maybe one with your generated HTML? It would be much easier to work with. I'm not familiar with Aurelia, but this only seems relevant to CSS. – Sunny Patel Jun 21 '16 at 13:12
  • I updated it with generated html, but thats not the problem. If I remove the css that I put, it aligns it properly. So its the combination of kendo and materialize tool in the code. Anyway, please let me know if you find anything. Thanks so much for looking into it. https://jsfiddle.net/u60u57bg/4/ – genericuser Jun 21 '16 at 15:28
  • Did you try removing the `height:50px;` from `.k-link`? Seems that was making the vertical alignment of the menu items inconsistent. – Sunny Patel Jun 21 '16 at 17:49
  • if I remove that, it gives it default height. Like i said, in html its totally different css setting. – genericuser Jun 21 '16 at 18:27
  • I'm sorry then, I'm not sure what else to play around with to help solve the issue. There's `height: 100%;`, `height: auto;`, and even `margin: auto; display: inline-block;` to play with `vertical-align: center;`. Good luck! – Sunny Patel Jun 21 '16 at 18:59
  • Thanks for trying! – genericuser Jun 21 '16 at 19:16

0 Answers0