MenuBar.MenuItem icon alignment

Is there a way to center icon inside MenuItem? The MenuItem has no text in my case, but a single icon, and as you can see from the attached picture the icon is aligned left.


it seems that you need to get rid of padding or margins - this the reason why icon’s position is not in the middle.
You can create your own theme or adjust already created one.
In your theme add something like (it is really hard to say exactly, because I don’t fully understand what you want to accomplish) .

.v-menubar { padding: 0px; } . .v-menubar-menuitem { padding: 0px; } You can check my other answer, which describes how to add css rules to the theme!/thread/8226800
and of course book of Vaadin

Hi Dmitrii,

thanks for your reply.

To simplify the question, I would want to accomplish a menubar with a single menu item that holds an icon which must be center aligned. Nor left, nor right, but straight in the center :-).

This the code you may try:

protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();

  MenuBar menubar = new MenuBar();
  MenuItem mi = menubar.addItem("", null);


[/code]The result is in attachements. As you can see, the icon shifts to the left. Sorry, but the css rules you’ve suggested don’t seem to effect the result. It is the latest Vaadin 7.3.2 with Valo theme.


Try this.

.v-menubar > .v-menubar-menuitem .v-icon {
  margin: 0;

Yes, it solves the problem.

Thank you very much, Joacim.

I should have examined FireBug results more attentively.

There’s actually a style name “icon-only” (currently undocumented unfortunately) which you can add to any menubar item to achieve just this. The Valo theme demo actually uses this in the menubar examples for the “B” and “lightning” icons.

The “icon-only” style is a generally better solution, as it allows to pick out a single menu item instead of a whole menu bar.
And this is the link to the Valo theme MenuBar demo source:

Wonderful, Thanks!